JavaScript検索システム - 検索後に要素が並んでいません

Question

JavaScriptの検索システムがあります.1つの問題を除いて完全に動作します。<ul>から何かを検索すると、項目の位置がわかりません。私は下の写真を持っている、私は理解できることを願っています。この写真では、などすべてが配置されていることを確認し、ライン上でできる

今私は項目「karambit」を検索するための検索を使用して、あなたが見ることができるように、それはもう並んでいません。

だから、私の質問は、これは何とかこのライニングを固定することができますか？

は、ここに私の検索システムのためのJavaScriptのだ：

$('#SearchItemsFromList').keyup(function() { 
    var valThis = $(this).val().toLowerCase(); 
    if (valThis === "") { 
     $('#inventory > li > div').show(); 
    } else { 
     $('#inventory > li > div').each(function() { 
      var text = $(this).text().toLowerCase(); 
      (text.indexOf(valThis) >= 0) ? $(this).show(): $(this).hide(); 
     }); 
    } 
}); 

私はプラグインMaterial Design Hierarchical Displayを使用しています、そこにそれらの項目を表示します。

これらのアイテムのHTMLコードはappendで、JavaScriptを使用しています。アクティブフィルタ付き

<li class='col 2 zoomIn animated' style='padding:8px;font-weight:bold;font-size:13.5px'><div class='card item-card waves-effect waves-light' style='margin:0%;min-height:295px;width:245.438px;border-radius: 0px;height: 295px;box-shadow: inset 0px 0px 25px 2px #232323;border: 1px solid black' id='" + item.id + "'><div class='iteam' style='text-decoration: underline;text-align: left;font-size: 14.5px;color: #E8E8E8;font-family: Roboto;position: relative;right: -3px;'>" + item.name + "</div><div class='condition' style='text-align: left;color: #E8E8E8;font-family: Roboto;position: relative;left: 3px;'>" + item.condition + "</div><div class='center-align' style='position: relative;padding:0%;top: -33px;'><img title=\"" + item.originalname + "\" draggable='false' src='https://steamcommunity-a.akamaihd.net/economy/image/" + item.iconurl + "/235fx235f'></div><div class='secondarea' style='position: relative;top: -129px;background: rgba(0, 0, 0,0.15);display: block;height: 163px;'><div class='buyer-price center-align' style='font-size:22.5px;font-family: Arial Black;color:#E8E8E8'>$" + Math.round(item.price) + "<div class='bitskinscomp' style='font-weight: normal;font-size:12px;font-family: Roboto;font: bold;'>" + message + "</div></div><a class='btn waves-effect waves-light' style='position:relative;left:-5px;top:50px' href='" + item.inspect + "' target='_blank'>Inspect</a><a class='btn waves-effect waves-light' style='position:relative;right:-5px;top:50px' id='purchaseButton'>Cart</a></div></li> 

Infiteスクロール

var perPage = 50; 
      function paginate(items, page) { 
       var start = perPage * page; 
       return items.slice(start, start + perPage); 
      } 
      var condition = ''; 

      function renderItems(pageItems) { 
       pageItems.forEach(function(item, index, arr) { 
        var message = 'BitSkins Price: $' + Math.round(item.bprice) + ''; 
        if (item.price !== null) { 
         if (item.bprice === '') { 
          message = 'Item never sold on BitSkins!'; 
         } 
         if (item.name != 'Operation Phoenix Case Key' && item.name != 'CS:GO Case Key' && item.name != 'Winter Offensive Case Key' && item.name != 'Revolver Case Key' && item.name != 'Operation Vanguard Case Key' && item.name != 'Operation Wildfire Case Key' && item.name != 'Shadow Case Key' && item.name != 'Operation Breakout Case Key' && item.name != 'Chroma Case Key' && item.name != 'Huntsman Case Key' && item.name != 'Falchion Case Key' && item.name != 'Chroma 2 Case Key') { 
          if (item.special == "1") { 
           setSpecialItems(item.id, item.name, item.condition, item.originalname, item.iconurl, item.price, message, item.inspect); 
          } else { 
           $("#inventory").html($("#inventory").html() + "<li class='col 2 zoomIn animated' style='padding:8px;font-weight:bold;font-size:13.5px'><div class='card item-card waves-effect waves-light' style='margin:0%;min-height:295px;width:245.438px;border-radius: 0px;height: 295px;box-shadow: inset 0px 0px 25px 2px #232323;border: 1px solid black' id='" + item.id + "'><div class='iteam' style='text-decoration: underline;text-align: left;font-size: 14.5px;color: #E8E8E8;font-family: Roboto;position: relative;right: -3px;'>" + item.name + "</div><div class='condition' style='text-align: left;color: #E8E8E8;font-family: Roboto;position: relative;left: 3px;'>" + item.condition + "</div><div class='center-align' style='position: relative;padding:0%;top: -33px;'><img title=\"" + item.originalname + "\" draggable='false' src='https://steamcommunity-a.akamaihd.net/economy/image/" + item.iconurl + "/235fx235f'></div><div class='secondarea' style='position: relative;top: -129px;background: rgba(0, 0, 0,0.15);display: block;height: 163px;'><div class='buyer-price center-align' style='font-size:22.5px;font-family: Arial Black;color:#E8E8E8'>$" + Math.round(item.price) + "<div class='bitskinscomp' style='font-weight: normal;font-size:12px;font-family: Roboto;font: bold;'>" + message + "</div></div><a class='btn waves-effect waves-light' style='position:relative;left:-5px;top:50px' href='" + item.inspect + "' target='_blank'>Inspect</a><a class='btn waves-effect waves-light' style='position:relative;right:-5px;top:50px' id='purchaseButton'>Cart</a></div></li>"); 
          } 
         } 
        } 
       }); 
      } 
      var win = $(window); 
      var page = 0; 
      renderItems(paginate(items, page)); 
      win.scroll(function() { 
       if ($(document).height() - win.height() == win.scrollTop()) { 
        page++; 
        renderItems(paginate(items, page)); 
       } 
      }); 

Answer 1

、あなただけの親liの内部div秒を隠したがされていません。私は彼らのパディングが混乱を引き起こすと思います。コードを次のように変更してください：

$('#SearchItemsFromList').keyup(function() { 
    var valThis = $(this).val().toLowerCase(); 
    if (valThis === "") { 
     // find li not li > div 
     $('#inventory > li').show(); 
    } else { 
     // same here 
     $('#inventory > li').each(function() { 
      // use inner div for text comparison 
      var text = $(this).find('> div').text().toLowerCase(); 
      // this is shorter to show/hide by true/false 
      $(this).toggle(text.indexOf(valThis) >= 0); 
     }); 
    } 
});