Я создаю простой pokedex, чтобы немного попрактиковаться. Я показываю список покемонов, используя bootstrap, 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>");
}
}
})
Спасибо за помощь.