jQuery 从内部 div 过滤内容

Question

现在我有一个功能，可以根据其中的内容过滤div。但是，目前它会根据主div 容器内的所有内容进行过滤(在本例中为 div class="name" (。但是，我希望它通过该div 中的div 进行过滤(在本例中为 div class="addresss" (。

我想要一些东西来完成我在下面的代码中尝试做的事情。

$(document).on('click', '#run', function(){
var comment = "Street Place";    
var searching = $('.name').children('.address:contains('+comment.value+')');  
searching.filter(':contains('+comment.value+')').show();    
});

对于此示例，我希望我的 Run 函数根据其与 var comment 的兼容性显示整个div，因此恰好具有与div address.相同的信息

JsFiddle Linkhttps://jsfiddle.net/4xe28x5z/

Answer 1

您可以使用

:has()过滤器和:contains()根据address之类的过滤name

$(document).on('click', '#run', function() {
  var comment = "Street Place";
  var searching = $('.name').has('.address:contains("' + comment + '")');
  searching.show();
});

.name {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="name">
  <p>Mr Sample</p>
  <div class="address">Street Place</div>
</div>
<div class="name">
  <p>Mr Sample</p>
  <div class="address">some Place</div>
</div>
<div class="name">
  <p>Mr Sample</p>
  <div class="address">other Place</div>
</div>
<input type="button" value="Run" id="run" />

Answer 2

Below is the modified code
$(document).on('click', '#run', function(){
var comment = "Street Place";    
var searching = $('.name').children('.address:contains('+comment+')');  
searching.filter(':contains('+comment+')').closest('.name').show();
});

https://jsfiddle.net/4xe28x5z/1/

Answer 3

您可以使用

jQuery :has进行过滤

$(document).on('click', '#run', function () {
  var comment = "Street Place";
  var searching = $('.name').has('.address:contains(' + comment + ')');
  searching.show();
});

 .name {
   display: none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="name">
  <p>Mr Sample</p>
  <div class="address">Street Place</div>
</div>
<div class="name">
  <p>Mr Sample 2</p>
  <div class="address">Street Place 2</div>
</div>
<div class="name">
  <p>Mr Sample 3</p>
  <div class="address">Street Palace</div>
</div>
<input type="button" value="Run" id="run" />