隐藏匹配字符串

Question

我有一个列表，我想要隐藏包含特定文本的所有li元素。让我们说它看起来像这样：

<ul>
   <li>text historical</li>
   <li>text</li>
   <li>text</li>
   <li>text</li>
   <li>text historical</li>
   <li>text</li>
   <li>text historical</li>    
</ul>

那么如何隐藏包含＆＃34;历史＆＃34;？的所有li元素？该列表是动态的，并将随着时间的推移而改变。

Answer 1

您可以使用正则表达式来过滤历史字母......

var lis = document.querySelectorAll('li');

Array.prototype.forEach.call(lis,function(li){
  if(li.textContent.match(/historical/g)){
    li.remove();
  }
});

<ul>
   <li>text historical</li>
   <li>text</li>
   <li>text</li>
   <li>text</li>
   <li>text historical</li>
   <li>text</li>
   <li>text historical</li>    
</ul>

Answer 2

使用 jQuery ＆＃39; s each()尝试以下内容：

＆＃13;

＆＃13;

$('ul > li').each(function(){
  if($(this).text().includes('historical'))
    $(this).hide();
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
   <li>text historical</li>
   <li>text</li>
   <li>text</li>
   <li>text</li>
   <li>text historical</li>
   <li>text</li>
   <li>text historical</li>    
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用:contains() Selector。在代码段中有.each()

的示例

var text = 'text historical';

$('ul li:contains('+text+')').each(function(){
    $(this).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
   <li>text historical</li>
   <li>text</li>
   <li>text</li>
   <li>text</li>
   <li>text historical</li>
   <li>text</li>
   <li>text historical</li>    
</ul>

但是如果没有.hide()，你可以.each()：

var text = 'text historical';

$('ul li:contains('+text+')').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
   <li>text historical</li>
   <li>text</li>
   <li>text</li>
   <li>text</li>
   <li>text historical</li>
   <li>text</li>
   <li>text historical</li>    
</ul>

唯一的问题是，在这种情况下，如果您使用text var作为“文字”，它也会隐藏“文字历史”，因为它包含“文字”：

var text = 'text';

$('ul li:contains('+text+')').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
   <li>text historical</li>
   <li>text</li>
   <li>text</li>
   <li>text</li>
   <li>text historical</li>
   <li>text</li>
   <li>text historical</li>    
</ul>

您还有另一种方法，使用.each()并验证元素内的.text()是否等于var：

var text = 'text';

$('ul li').each(function(){
    if($(this).text() === text){
        $(this).hide();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
   <li>text historical</li>
   <li>text</li>
   <li>text</li>
   <li>text</li>
   <li>text historical</li>
   <li>text</li>
   <li>text historical</li>    
</ul>

您也可以使用.filter()：

var text = 'text';

$('ul li').filter(function() {
    return $(this).text() === text;
}).hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
   <li>text historical</li>
   <li>text</li>
   <li>text</li>
   <li>text</li>
   <li>text historical</li>
   <li>text</li>
   <li>text historical</li>    
</ul>

Answer 4

您可以使用此选择器： li:contains('historical')

请查看此代码段

一行代码。

$("#target > li:contains('historical')").hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id='target'>
   <li>text historical</li>
   <li>text</li>
   <li>text</li>
   <li>text</li>
   <li>text historical</li>
   <li>text</li>
   <li>text historical</li>    
</ul>

请参阅？隐藏了li个元素。