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