时间戳

首页 > 解决方案 > 我不知道为什么我不能用 jquery 排序和过滤 div

jquery - 我不知道为什么我不能用 jquery 排序和过滤 div

问题描述

在处理我的代码很长一段时间后，我终于完成了所有设置。CSS 是正确的，HTML 是正确的，正如你们中的一些人指出的那样，我的格式是正确的，所以我可以很容易地看到问题。但是，最后一步是能够对我的 div 进行排序和过滤。从代码中可以看出，整个目标是将它们保持在一起。当我确实让它工作时，它只是拉出特定的文本而不是保持内联。我想我已经解决了内联问题，但是当您开始在搜索栏中输入时，我的 jquery 现在完全拒绝响应。

我已经尝试将 div Id 添加到我的所有课程中，更改 jquery 代码以及我沮丧的大脑现在无法记住的其他一些事情。

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"</script>
<script>
    // <![CDATA[
    $(document).ready(function(){
                                      $("#myInput").on("keyup", function() {
                                        var value = $(this).val().toLowerCase();
                                        $("#myDiv").filter(function() {
                                          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                                        });
                                      });
                                    });
    // ]]>
</script>


    <div class="div1"><input id="myInput" type="text" placeholder="Search.." /></div>
    <div class="gridcontainer">
        <div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG1JT508626 STOCK #: 082030 <br /> MSRP$27,385
            <p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
        </div>
        <div class="divtablecell">NEW 2018 JEEP RENEGADE ALTITUDE 4X2 <br /> VIN: ZACCJABB4JPH91207 STOCK #: 586043 <br /> MSRP$25,915
            <p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
        </div>
        <div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG3JT511401 STOCK #: 082035 <br /> MSRP$27,385
            <p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
        </div>
        <div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB4JPJ43841 STOCK #: 586049 <br /> MSRP$26,240
            <p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
        </div>
        <div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB3JPJ42826 STOCK #: 586051 <br /> MSRP$26,240
            <p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
        </div>
        <div class="divtablecell">NEW 2019 JEEP COMPASS SPORT FWD <br /> VIN: 3C4NJCAB8KT615373 STOCK #: 492005 <br /> MSRP$25,285
            <p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
        </div>

标签： jquery

解决方案

问题 1) 没有 id 为mydiv的元素

问题 2)$("#myDiv")将针对 id 为myDiv的单个元素（如果存在）。

解决方案：将您的选择器更改$(".divtablecell")为选择div该类的所有内容。

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $(".divtablecell").each(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="div1"><input id="myInput" type="text" placeholder="Search.." /></div>
<div class="gridcontainer">
  <div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG1JT508626 STOCK #: 082030 <br /> MSRP$27,385
    <p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
  </div>
  <div class="divtablecell">NEW 2018 JEEP RENEGADE ALTITUDE 4X2 <br /> VIN: ZACCJABB4JPH91207 STOCK #: 586043 <br /> MSRP$25,915
    <p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
  </div>
  <div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG3JT511401 STOCK #: 082035 <br /> MSRP$27,385
    <p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
  </div>
  <div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB4JPJ43841 STOCK #: 586049 <br /> MSRP$26,240
    <p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
  </div>
  <div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB3JPJ42826 STOCK #: 586051 <br /> MSRP$26,240
    <p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
  </div>
  <div class="divtablecell">NEW 2019 JEEP COMPASS SPORT FWD <br /> VIN: 3C4NJCAB8KT615373 STOCK #: 492005 <br /> MSRP$25,285
    <p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
  </div>

推荐阅读