从数组中获取包含文本的元素
Get elements containing text from array
我想搜索数组中包含任何字符串的所有元素。例如我有以下项目清单
<ul>
<li>cricket bat</li>
<li>tennis ball</li>
<li>golf ball</li>
<li>hockey stick</li>
</ul>
和这个阵列
var arr = ['bat', 'ball'];
它应该选择所有具有文本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';
}
}
您可以使用:contains
伪选择器:
选择包含指定文本的所有元素。
$('li:contains("bat"), li:contains("ball")')
DEMO
您可以使用:包含选择器。
我想你指的是这些价值观中的任何一个,在这种情况下,
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>
试试这个:
$.each(["bat", "ball"], function (i,val) {
if ($("ul li:contains(" + val + ")").length) {
$("ul li:contains(" + val + ")").css('color', 'red')
}
})
DEMO
尝试使用.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>
相关文章:
- 如何在浏览器中选择所有*renderable*文本元素
- 如何使用RaphaelJS将文本元素约束在正方形中
- 使用d3.js删除svg文本元素
- 替换动态生成的文本元素
- Protractor测试:如何设置登录表单中文本元素的值
- 如何获取与提交表单上所选复选框相同行的文本元素
- SVG文本锚点设置使文本元素移动
- Svg文本元素被另一个Svg元素重叠
- Imacros替换文本元素
- Windows 8 上的 Safari 5 反转 SVG 上的所有文本元素
- 运行 PHP 代码以根据文本元素的值从数据库中获取值
- 我想要输入文本元素中的实时更改事件
- 如何使用 jQuery 忽略文本元素上的特定字符
- RaphaelJS中的文本元素不会在触摸设备上拖动
- d3 - 旋转数组中的文本元素
- 如何通过单击复选框将文本元素从输入复制到另一个输入
- .text() 给出元素中的所有文本元素
- 在函数内调用对象文本元素
- 移动文本元素与弧拉斐尔JS
- 编辑文本元素时,将重置后端用户设置