Question

我有像

这样的HTML

<ul>
 <li>School
  <ul>
   <li> Tata
   <ul>
      <li>Foundation</li>
      <li> Engineering</li>
   </ul>
  </li>
  </ul>
 </li>
 <li>College</li>
<li>Hospital</li>
<li> Truck
  <ul>
    <li>Tata</li>
   <li>Motor</li>
 </ul>
</li>
</ul>

我想使用jquery根据文本过滤结果，例如text =“Tata”应该显示以下结果

<ul>
   <li> Tata
   <ul>
      <li>Foundation</li>
      <li> Engineering</li>
   </ul>
  </li>
  </ul>
<li>Tata</li>

Answer 1

因为你真正想要的是一个＆＃34;包含＆＃34;搜索，我会使用带有正则表达式搜索文本的过滤器。请注意，这将返回您在问题正文中指定的内容，但不返回标题。如果您希望不匹配的元素在返回的条件中添加!。另请注意，这是一个不区分大小写的搜索。

编辑已更新，只能将其缩小到仅包含文字的最内容li。

var $matches = $('li').filter(function() {
    return findMatches(this,'Tata') && !findMatches($(this).children(),'Tata');
});

function findMatches(elem, str) {
    var regex = new RegExp(str, 'i');
    return regex.test($(elem).text());
}

如果您关心案例，使用:contains("Tata")可能更合适。

var $othermatches = $('li:contains("Tata")').filter(function () {
    return !$(this).children(':contains("Tata")').length;
});

http://jsfiddle.net/vnwQ3/

的工作小提琴

Answer 2

您可以尝试使用jQuery中的:contains('text')

$("li:contains('Tata')").parent();  // returns ul

<强>更新

正确查看OP提供的html后，

将:contains('text')与某些条件逻辑一起使用会将结果呈现为预期的OP。

$('li:contains("Tata")').each(function (i) {
    if ($(this).text().indexOf("Tata") === 0) { //look for first occurrence
        if ($(this).children().length === 0) { //check the length to see individual lis
            console.log(this); 
        } else {
            console.log($(this).parent()[0]); //if it has children get its parent
        }
    }
});

结果：（第一个控制台）
<ul>
   <li> Tata
   <ul>
      <li>Foundation</li>
      <li> Engineering</li>
   </ul>
  </li>
  </ul>
（第二控制台）
<li>Tata</li>

这完全基于OP想要的结果。但我怀疑这不是缩进项目可能是一个挑战任务（如果有的话）

但是我喜欢@tvanfosson的elegance，但他错过了检查第一个结果的父母。

<强> JSFiddle

Answer 3

你可以用这个

$('li').each(function(){
  if($(this).html() == "your specified text"){
    alert($(this).parent().attr('id');//ul ids are alerted
  }
})

Answer 4

您可以使用过滤器

$(function(){
   var filtered =  $('li').filter(function(){
        return $(this).text() == 'Tata';
    });

    console.log(filtered)
})

获取没有指定文本的所有ul元素

4 个答案: