我正在创建一个简单的图鉴来进行一些练习。我使用 bootstrap 显示了一个 pokemon 列表，每行 6 个。我使用过滤器功能来过滤宠物小 Sprite 并仅显示名称中包含图像中给定输入的宠物小 Sprite 。 
效果很好，但我想将结果压缩到尽可能少的行中，每行最多六个元素。换句话说，我想在 charizard 旁边添加“chimchar”，然后继续，直到每行有 6 个元素。 这是我的过滤函数:
$(document).ready(function(){
$("#pkmn").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#listPokemon *").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
这是我的家:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calcolatore IV</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="../js/getListPokemonScript.js"></script>
<script src="../js/searchRealTimeScript.js"></script>
<link rel="stylesheet" type="text/css" href="../css/home.css">
</head>
<body>
<div class="jumbotron-fluid">
<h1 align="center">Calcolatore IV USUM</h1>
<p align="center"> Puoi utilizzare il seguente tool per calcolare le IV del tuo pokemon su SM e USUM </p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm"></div>
<div class="col-sm">
<div class="form-group">
<i class="fa fa-search" ></i>
<label for="pkmn" align="center">Cerca il tuo Pokemon:</label>
<input type="text" class="form-control" id="pkmn" align="center">
</div>
</div>
<div class="col-sm"></div>
</div>
</div>
<div class="container-fluid" id="listPokemon"></div>
</body>
</html>
这里是创建列和行的脚本:
$(document).ready(function(){
$('body').css('display', 'none');
$('body').fadeIn(500);
});
$.getJSON("https://pokeapi.co/api/v2/pokemon/?limit=949", function (pokemonList) {
for (i = 0; i < pokemonList.results.length; i=i+6) {
var rowElement = document.createElement("div");
rowElement.setAttribute("class","row");
rowElement.setAttribute("id", "row" + i/6);
$("#listPokemon").append(rowElement);
for (j = i; j < i+6; j++) {
var namePokemon = pokemonList.results[j].name;
var col = document.createElement("div");
col.setAttribute("class","col-sm-2");
col.setAttribute("id",namePokemon);
$("#row"+i/6).append(col);
//create a card
var card = document.createElement("div");
card.setAttribute("class","card");
card.setAttribute("id","card"+namePokemon);
$("#"+namePokemon).append(card);
//create card image
var cardImage = document.createElement("img");
cardImage.setAttribute("class","card-img-top");
var url = pokemonList.results[j].url;
var idPokemon = url.match(/\d/g);
idPokemon.shift();
idPokemon = idPokemon.join("");
cardImage.setAttribute("src","../Sprites/"+idPokemon+".png");
$("#card"+namePokemon).append(cardImage);
//create card body
var cardBody = document.createElement("div");
cardBody.setAttribute("class","card-body");
cardBody.setAttribute("id","body"+namePokemon);
$("#card"+namePokemon).append(cardBody);
// create card title
$("#body"+namePokemon).append("<h6 class='card-title' style='text-align: center'>" + namePokemon.toString().toUpperCase()+"</h6>");
}
}
})
感谢您的帮助。
最佳答案
您只需要一行，列将根据“col-sm-2”自动换行 - 所以在 for 循环之外创建您的行，如第一个代码段所示(我注释掉了现有逻辑)并始终追加外行的列(第二个代码片段): https://jsfiddle.net/gpmnj957/3/
var rowElement = document.createElement("div");
rowElement.setAttribute("class","row");
rowElement.setAttribute("id", "rowThatWraps")
for (i = 0; i < pokemonList.results.length; i=i+6) {
//var rowElement = document.createElement("div");
//rowElement.setAttribute("class","row");
//rowElement.setAttribute("id", "row" + i/6);
第二个代码片段:
$("#rowThatWraps").append(col);
//$("#row"+i/6).append(col);
关于javascript - 根据 Bootstrap 中输入的内容动态重新排序列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52007124/