$への特定のタイプの最も近い要素を検索し（この）

Question

は、私はこのような構造を持っている：例えば、私はそれにFile 4.xlsxで<li>にアクセスしていますが

<div class="col-sm-6"> 

<h3>Fileset 1</h3> 

<ul class="fileset-list"> 
     <li><a href="#">File 1.pdf</a></li> 
</ul> 

<h3>Fileset 2</h3> 

<ul class="fileset-list"> 

     <li style="display: list-item;"><a href="#">File 2.doc</a></li>  
     <li style="display: list-item;"><a href="#">File 3.csv</a></li> 
     <li style="display: list-item;"><a href="#">File 4.xlsx</a></li> 
</ul> 

<h3>Fileset 3</h3> 

<ul class="fileset-list"> 

     <li style="display: list-item;"><a href="#">File 5.pdf</a></li> 

</div> 

場合はどのように私は先行を標的としh3素子。

<br><label class="label label-default" for="searchDocuments">Search </label> 
    <input type="text" class="form-control" name="searchDocuments" id="searchDocuments"> 

<ul id="searchResults"> 

</ul> 

<script> 

$(document).ready(function(){ 

    $('#searchClear').click(function(){ 
     $('#searchDocuments').val(""); 
    }) 
    var resultsList = $('#searchResults'); 
    var items = $('.fileset-list li'); 
    $('#searchDocuments').keyup(function() { 
    var value = $(this).val().toLowerCase(); 

    items.each(function(index) { 

    var innerHtmlTemp = $(this).html().toLowerCase(); 
    if((innerHtmlTemp.indexOf(value) > -1)) { 
      $(this).show(500); 
      $(this).closest('h3').show(500); // Find closest h3 and show it   
      } else { 
       $(this).hide(500) 
       **$(this).closest('h3').hide(500); // Find closest h3 and hide it 
      } 
      if($.trim(value) == ""){ 
       items.show(500); 
       ('h3').show(); // Find all h3's and show them if the search box is empty 
      } 

     }); 

    }); 
}) 

</script> 

は、だから私はそれが他のすべての非マッチング<li>要素を隠し見つけることに、<li>要素を探しています：

現在、私はこのようなものを持っています。しかし、少なくとも1つのリスト項目に一致するものが見つからなければ、それらの要素の対応するタイトルを非表示にしたい。うまくいけばそれは理にかなっている。潜在的に、私はいつもsearchResults divの要素を（ハイパーリンクをそのまま残して）複製するために、これらの "一致する"結果を望むかもしれません。

Answer 1

あなたがしなければならないことは簡単ではありませんが、 "a"要素と最も近い "h3"要素の各グループをリンクする属性を追加することをお勧めします。関連する "h3"を表示/ブドウ表示することができます

私はこのサンプルを用意しました（これにマッチした "a"を選択するために何もしませんでした）が、検索に "contains"メソッドを使用することができます。私はログにマッチしたH3のテキストを書いている

（ブラウザログ）

編集：私はあなたがより多くの属性

$(document).ready(function(){ 
 
    
 
    /* New Solution */ 
 
    console.log($("li a:contains('File 5.pdf')").parents("ul").first().prev("h3").text()); 
 
    
 
    console.log($("li a:contains('File 3.csv')").parents("ul").first().prev("h3").text()); 
 
    
 
    console.log($("li a:contains('File 1.pdf')").parents("ul").first().prev("h3").text()); 
 
    
 
    /* Old Solution */ 
 
    /*var h3ID=$("li a:contains('File 3.csv')").attr("data-parent"); 
 
    console.log($("#"+h3ID).text()); 
 
    
 
    var h3ID=$("li a:contains('File 1')").attr("data-parent"); 
 
    console.log($("#"+h3ID).text()); 
 
    
 
    var h3ID=$("li a:contains('File 5.pdf')").attr("data-parent"); 
 
    console.log($("#"+h3ID).text());*/ 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="col-sm-6"> 
 

 
<h3 id="h3_1">Fileset 1</h3> 
 

 
<ul class="fileset-list"> 
 
     <li><a href="#" data-parent="h3_1">File 1.pdf</a></li> 
 
</ul> 
 

 
<h3 id="h3_2">Fileset 2</h3> 
 

 
<ul class="fileset-list"> 
 

 
     <li style="display: list-item;"><a href="#" data-parent="h3_2">File 2.doc</a></li>  
 
     <li style="display: list-item;"><a href="#" data-parent="h3_2">File 3.csv</a></li> 
 
     <li style="display: list-item;"><a href="#" data-parent="h3_2">File 4.xlsx</a></li> 
 
</ul> 
 

 
<h3 id="h3_3">Fileset 3</h3> 
 

 
<ul class="fileset-list"> 
 

 
     <li style="display: list-item;"><a href="#" data-parent="h3_3">File 5.pdf</a></li> 
 

 
</div>

を追加する必要はありません、コードので変更しましたあなた

Answer 2

最初の親メートルを助ける

・ホープatchingセレクタ（ 'H3'）はここにあなたの前にある要素

で簡単な方法です -

$('this').parents('h3').first()

これはファイルセット2に応答のための