Question

我有这个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 包含所有＆lt; li ＆gt;元件！

Answer 1

尝试在此背景下使用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();

DEMO

Answer 2

这样做 - 创建一个你想要隐藏的元素数组，然后迭代它并使用正则表达式过滤器，如果元素匹配则隐藏它。请注意，这也可以反过来 - 只需隐藏函数顶部的所有li，然后将.hide（）交换为.show（）以显示匹配元素。唯一的事情 - 我必须将是/否值设为“00”和“01”以确保它们是唯一的并且不仅仅匹配“0”和“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>

jQuery按数据值排除元素

2 个答案:

DEMO