内側のdivのjqueryフィルタのコンテンツ

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();  
}); 

、私はそうdiv address.

JsFiddleリンク https://jsfiddle.net/4xe28x5z/

Answer 1

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 2

と同じ情報を持つことが起こるvar commentとの適合性に基づいて全体のdivを表示するために私の実行機能が欲しいですフィルター:contains()の:has()を使用すると、を基にして などのフィルターをかけてnameをフィルタリングすることができます10

$(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 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" />