獲取包含數組中文本的元素

Question

我想搜索包含數組中任何字符串的所有元素。 例如 我有一個項目

<ul> 
    <li>cricket bat</li> 
    <li>tennis ball</li> 
    <li>golf ball</li> 
    <li>hockey stick</li> 
</ul> 

的下面的列表，這陣

var arr = ['bat', 'ball']; 

應該選擇所有文字有球棒和球的元素。我怎樣才能實現這個使用jQuery或JavaScript。

這就是我試圖

filter = 'bat ball'; 
var lis = row('UL li'); 
var flag = 0; 
for (var i = 0; i < lis.length; i++) { 
    var name = lis[i].getElementsByTagName('a')[0].innerHTML; 
    if (name.toUpperCase().indexOf(filter) > -1) { 
     flag = 1; 
    } else { 
     lis[i].style.display = 'none'; 
    } 
} 

Answer 1

您可以使用:contains selector。

我想你的意思是這些值中的任何一個，在這種情況下

var arr = ['bat', 'ball']; 
 

 
var selectors = arr.map(function(val) { 
 
    return ':contains(' + val + ')' 
 
}); 
 
var $lis = $('ul li').filter(selectors.join()); 
 

 
$lis.css('color', 'red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>cricket bat</li> 
 
    <li>tennis ball</li> 
 
    <li>golf ball</li> 
 
    <li>hockey stick</li> 
 
</ul>

Answer 2

可以使用:contains僞選擇：

選擇包含指定文字的所有元素。

$('li:contains("bat"), li:contains("ball")') 

DEMO

Answer 3

嘗試利用.filter()，.match()

var arr = ["bat", "ball"]; 
 

 
var res = Array.prototype.filter.call(document.querySelectorAll("li") 
 
      , function(el, index) { 
 
       return el.textContent.match(new RegExp(arr.join("|"))) !== null 
 
      }); 
 
    
 
console.log(res);

<ul> 
 
    <li>cricket bat</li> 
 
    <li>tennis ball</li> 
 
    <li>golf ball</li> 
 
    <li>hockey stick</li> 
 
</ul>

Answer 4

嘗試這種情況：陣列的

$.each(["bat", "ball"], function (i,val) { 
    if ($("ul li:contains(" + val + ")").length) { 
     $("ul li:contains(" + val + ")").css('color', 'red') 
    } 
}) 

DEMO