[英]Show Div's based on user input
I am working on one of the requirement, where I have to show div based on user input.我正在处理其中一项要求,我必须根据用户输入显示 div。 Below is the code structure.
下面是代码结构。
<input id="location-filter" type="text">
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title"><a href=""></a></h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>London</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p><a href="">Read More</a></p>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title"><a href=""></a></h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>Canada</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p><a href="">Read More</a></p>
</div>
</div>
</div>
There are two 'item' divs, the difference is only 'item-location' div, containing p tag of location names.有两个 'item' div,区别仅是 'item-location' div,包含位置名称的 p 标签。 If user enters 'London', I want to show all 'item' divs which contain text 'london' and hide other 'item' divs.
如果用户输入“伦敦”,我想显示所有包含文本“伦敦”的“项目”div 并隐藏其他“项目”div。 I tried the below code, but no luck.
我尝试了下面的代码,但没有运气。 Any help would be appreciated.
任何帮助,将不胜感激。 Thank you.
谢谢你。
$("#location-filter").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
// Loop through the div
$('.item > .item-location p').each(function() {
// If the list item does not contain the text phrase fade it out
if ($("this").text().search(new RegExp(filter, "i")) < 0) {
$(this).hide();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
});
Your code had some mistakes.你的代码有一些错误。 The
>
is used to select the direct child. >
用于选择直接子级。 .item
has no .item-location
element as direct child. .item
没有.item-location
元素作为直接子元素。 That is why, each
iterator wasn't running at all.这就是为什么
each
迭代器根本没有运行的原因。 Besides that, the this
in the if
condition is wrapped inside double quotes, making it a string.除此之外,
if
条件中的this
用双引号括起来,使其成为字符串。 And the last mistake was that, in the each
loop, this
refers to the element being iterated.最后一个错误是,在
each
循环中, this
指的是被迭代的元素。 To hide or show the .item
, you've to use closest
to reach the ancestor .item
要隐藏或显示
.item
,您必须使用closest
来到.item
先.item
$("#location-filter").keyup(function() { var filter = $(this).val(), count = 0; $('.item .item-location p').each(function() { if ($(this).text().search(new RegExp(filter, "i")) < 0) { $(this).closest('.item').hide(); } else { $(this).closest('.item').show(); count++; } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="location-filter" type="text"> <div class="item"> <div class="item-image"> <a href=""> <img class="img-fluid" src=""> <div class="item-badges"></div> <div class="item-meta"> <div class="item-price"> <small></small> </div> </div> </a> </div> <div class="item-info"> <h3 class="item-title"> <a href=""></a> </h3> <div class="item-location"> <i class="fa fa-map-marker "></i> <p>London</p> </div> <div class="item-details-i"> <span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span> <span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span> <span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span> </div> <div class="item-details"> <p><a href="">Read More</a></p> </div> </div> </div> <div class="item"> <div class="item-image"> <a href=""> <img class="img-fluid" src=""> <div class="item-badges"></div> <div class="item-meta"> <div class="item-price"> <small></small> </div> </div> </a> </div> <div class="item-info"> <h3 class="item-title"> <a href=""></a> </h3> <div class="item-location"> <i class="fa fa-map-marker "></i> <p>Canada</p> </div> <div class="item-details-i"> <span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span> <span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span> <span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span> </div> <div class="item-details"> <p><a href="">Read More</a></p> </div> </div> </div>
I think the problem is with your CSS selector in the Jquery.我认为问题出在 Jquery 中的 CSS 选择器上。
$('.item .item-location p')
should be right.应该是对的。 This is because with the arrow, it is looking for an element with "item-location" directly under an element with the class "item" which it is not able to find.
这是因为使用箭头,它会在其无法找到的类“item”的元素正下方寻找具有“item-location”的元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.