时间戳

首页 > 解决方案 > 根据引导程序中输入的内容动态重新排序列

javascript - 根据引导程序中输入的内容动态重新排序列

问题描述

我正在创建一个简单的 pokedex 来进行一些练习。我使用引导程序显示口袋妖怪列表，每行 6 个。我使用过滤器功能来过滤口袋妖怪，并仅显示名称中包含图像中给出的输入的口袋妖怪。在此处输入图像描述

它工作得很好，但我想用尽可能少的行压缩结果，每行最多六个元素。换句话说，我想在 charizard 旁边有“chimchar”并继续，直到每行有六个项目。这是我的过滤功能：

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

        }

    }

})

谢谢您的帮助。

标签： javascripthtmlcsstwitter-bootstrapbootstrap-4

解决方案

您只需要一行，列将根据“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);

推荐阅读