根据引导中输入的内容动态地对列进行重新排序

Question

i'm creating a simple pokedex to make some practice. 我正在创建一个简单的pokedex以进行一些练习。 I display a list of pokemon using bootstrap, 6 per row. 我使用引导程序显示口袋妖怪的列表，每行6个。 I used the filter function to filter pokemon and display only pokemons that contains in name the input given like in the image. 我使用过滤器功能过滤了神奇宝贝，并仅显示名称包含图像中给定输入的神奇宝贝。

It works well but I'd like to compact the results in as few lines as possible, with a max of six element per row. 它运行良好，但我想将结果压缩到尽可能少的行中，每行最多六个元素。 In other words, i'd like to have "chimchar" next to charizard and go on, until you have six items per row. 换句话说，我想在蜥蜴旁边放一个“ chimchar”，然后继续，直到每行有六个项目为止。 this is my filter function: 这是我的过滤器功能：

$(document).ready(function(){
    $("#pkmn").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#listPokemon *").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    });
});

here my home: 这是我的家：

   <!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>

Here the script that create columns and rows: 这里是创建列和行的脚本：

$(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>");

        }

    }

})

Thanks for the help. 谢谢您的帮助。

Answer 1

You only need one row and the columns will automatically wrap based on "col-sm-2" - so create your row outside of the for loop as seen in the first snippet (I commented out the existing logic) and always append the columns to the outer row (second code snippet): https://jsfiddle.net/gpmnj957/3/ 您只需要一行，并且列将基于“ 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);

Second code snippet: 第二个代码段：

$("#rowThatWraps").append(col);
//$("#row"+i/6).append(col);

根据引导中输入的内容动态地对列进行重新排序

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-08-24 15:12:49

根据引导中输入的内容动态地对列进行重新排序

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-08-24 15:12:49

解决方案1
1 已采纳 2018-08-24 15:12:49