jQuery按数据值排除元素

jQuery exclude element by data value

本文关键字：排除 元素 数据 jQuery      更新时间：2023-10-01

我有这个HTML代码：

<ul class="chosen-results">
    <li data-value="-">-</li>
    <li data-value="145">145</li>
    <li data-value="170">170</li>
    <li data-value="300">300</li>
</ul>
<ul class="chosen-results">
    <li data-value="-">-</li>
    <li data-value="0">No</li>
    <li data-value="1">Yes</li>
</ul>

我需要隐藏所有具有与值数组匹配的数据值的元素。我已经试过了：

var array = ['145', '0', '300'];
var $li = $('.chosen-results li').filter(function(i) {
    return $(this).data('value') != array[i];
});

但是$li包含所有<li元素！

尝试在此上下文中使用Array.prototype.indexOf()，

var array = ['145', '0', '300'];
var $li = $('.chosen-results li').filter(function(i) {
console.log( typeof $(this).data('value'));
    return array.indexOf($(this).data('value') + "") > -1;
}).hide();

演示

这是有效的-创建一个要隐藏的元素数组，然后迭代它，并使用正则表达式过滤器，如果元素匹配，则隐藏它。注意，这也可以反过来操作-只需隐藏函数顶部的所有li，然后将.hide（）转换为.show（）即可显示匹配的元素。唯一的问题是，我必须将是/否值设置为"00"answers"01"，以确保它们是唯一的，而不仅仅是匹配"0"answers"1"。

	$(function() 
	{  
	
		var list=["145","300","00"];
		
		$('.chosen-results li').each(function(){
		for (i=0;i<list.length;i++)
			{
				var rex = new RegExp(list[i], 'i');
				$('.chosen-results li').filter(function() {
						return rex.test($(this).attr('data-value'));
							}).hide();
			}
		})
	})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" /> 
    <title>List Filter</title>
</head>
<body>
<ul class="chosen-results">
    <li data-value="-">-</li>
    <li data-value="145">145</li>
    <li data-value="170">170</li>
    <li data-value="300">300</li>
</ul>
<ul class="chosen-results">
    <li data-value="-">-</li>
    <li data-value="00">No</li>
    <li data-value="01">Yes</li>
</ul>
</body>
</html>

相关文章：