Question

在处理了一段时间的代码之后，我终于完成了所有设置。 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>

Answer 1

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

我不知道为什么我不能使用jQuery对div进行排序和过滤

1 个答案: