我不知道为什么我不能用jquery对div进行排序和过滤 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>

问题 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>

最新更新