Question

我有这样的结构：

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

例如，如果我访问<li>中的File 4.xlsx，那么我将如何定位前一个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>元素。但我还希望它隐藏这些元素的相应标题，如果它找不到至少一个列表项的匹配项。希望这是有道理的。可能，我总是希望这些“匹配”结果克隆searchResults div中的元素（超链接仍然完好无损），一旦术语在搜索框中更改，它就会再次删除它。

Answer 1

你需要做的事情并不容易，但我建议添加属性来连接每组“a”元素和最近的“h3”元素..通过这种方式，一旦找到匹配的“a”，你就可以显示/葡萄相关的“h3”

我准备了这个样本（我已经跳过你所做的任何事情来选择匹配的“a”）但你可能想用“包含”方法进行搜索。

我正在日志（浏览器日志）中编写匹配的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

匹配选择器的第一个父级（'h3'）是您的前一个元素

这是简单的方法 -

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

这将提供文件集2

找到某个类型的最近元素到$（this）

2 个答案: