Javascript 显示Div'；s基于用户输入

我正在处理一个需求，其中我必须根据用户输入显示div。下面是代码结构

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

伦敦

3.
2.
1.

加拿大

3.
2.
1.

有两个'item'div，区别仅在于'item location'div，其中包含位置名称的p标记。如果用户输入'London'，我想显示包含文本'London'的所有'item'div，并隐藏其他'item'div。我尝试了下面的代码，但没有成功。任何帮助都将不胜感激。多谢各位

$("#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++;
}
});
});

$（“#位置过滤器”）.keyup（函数（）{
//检索输入字段文本并将计数重置为零
var filter=$（this.val（），
计数=0；
//在div中循环
$（'.item>.item location p'）。每个（函数（）{
//如果列表项不包含文本短语，请将其淡出
if（$（（“this”）.text（）.search（新的RegExp（filter，“i”）））<0）{
$（this.hide（）；
//如果短语匹配，则显示列表项并将计数增加1
}否则{
$（this.show（）；
计数++；
}
});
});

您的代码有一些错误。

用于选择直接子级

.item

没有作为直接子元素的

.item location

元素。这就是为什么，

每个

迭代器根本没有运行的原因。除此之外，

if

条件中的

this

被包装在双引号中，使其成为字符串。最后一个错误是，在

每个

循环中，

这个

引用被迭代的元素。要隐藏或显示

.item

，必须使用

最近的
到达祖先
.item


$（“#位置过滤器”）.keyup（函数（）{
var filter=$（this.val（），
计数=0；
$（'.item.item location p'）。每个（函数（）{
if（$（this.text（）.search）（新的RegExp（filter，“i”））<0）{
$（this）.closest（'.item'）.hide（）；
}否则{
$（this）.closest（'.item'）.show（）；
计数++；
}
});
});

伦敦

3.
2.
1.

加拿大

3.
2.
1.

我认为问题在于Jquery中的CSS选择器

$('.item  .item-location p')

应该是对的。这是因为使用箭头，它正在查找一个类为“item”的元素的正下方具有“item location”的元素，但它找不到该元素。
看看我的答案：）太好了。别忘了把答案标为正确：）