jquery - 如何选择具有特定属性的可见元素

Question

假设有一个 div 包含一些 'li' 元素。当我点击一个复选框时，一些元素（li）被选中。我想从 div 中可见的 li 中选择所有具有某些特定属性的 li。例如下面，假设只有前三个 li 可见，我想选择 value=ItemA 和 color=Red 的 li。

>

 <div id="products">
<li value="ItemA" color="Yellow"><img src="images/1.jpg"></li>
<li value="ItemA" color="Red"><img src="images/2.jpg"></li>
<li value="ItemB" color="Red"><img src="images/3.jpg"></li>
<li value="BRAND C" color="Red"><img src="images/7.jpg"></li>
<li value="BRAND D" color="Blue"><img src="images/8.jpg"></li>
<li value="BRAND A" color="Yellow"><img src="images/9.jpg"></li>
<li value="BRAND B" color="Yellow"><img src="images/10.jpg"></li>
</div>

我知道这些查询。

$("#products").find("li:visible")      //query to find visible li

$('li[value="ItemA"][color="Red"]).hide()   // query with attribute selectors

选择这样的 li 的 jquery 语句将是什么。

Answer 1

value并且color是li元素的无效属性，您可以改用data-*属性：

<li data-value="itema" data-color="red"><img src="images/1.jpg"></li>

然后您可以使用:visible选择器来选择可见元素。

$('#products li[data-value="itema"][data-color="red"]:visible');

这是一个长而慢的选择器，但会选择您想要的元素。

Answer 2

因此，如果您想要所有可见元素ItemAand Red，只需使用

$('li[value="ItemA"][color="Red"]:visible')

但就像@undefined 所说，你不应该使用colorand属性，value而应该使用正确的html5 数据属性和.data-colordata-value

<li data-value="ItemA" data-color="Red"><img src="images/1.jpg" /></li>

Answer 3

使用.filter()功能

$('li[value="ItemA"][color="Red"]').filter(':visible');

或者

$('li[value="ItemA"][color="Red"]').filter(function() {
            return $(this).is(':visible');
})

检查小提琴