从数组中获取包含文本的元素

Question

我想搜索数组中包含任何字符串的所有元素。例如我有以下物品清单

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

和这个数组

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

它应该 select 所有具有文字 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伪选择器：

Select all elements that contain the specified text.

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

DEMO

Answer 2

您可以使用 :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 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

从数组中获取包含文本的元素

Get elements containing text from array

html

javascript

arrays

jquery

contains