假设有一个div包含一些'li'元素。当我点击一个复选框时,一些元素(li)被选中。我想选择所有具有某些特定属性的li,这些属性在div中可见。 例如下面,假设只有前三个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语句是什么。
答案 0 :(得分:4)
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');
这是一个长而慢的选择器,但会选择你想要的元素。
答案 1 :(得分:3)
因此,如果您想要ItemA
和Red
的所有可见元素,请使用
$('li[value="ItemA"][color="Red"]:visible')
但是像@undefined所说,你不应该使用color
和value
属性,而应使用正确的html5 data attributes,data-color
和data-value
。< / p>
<li data-value="ItemA" data-color="Red"><img src="images/1.jpg" /></li>
答案 2 :(得分:1)
使用.filter()
功能
$('li[value="ItemA"][color="Red"]').filter(':visible');
OR
$('li[value="ItemA"][color="Red"]').filter(function() {
return $(this).is(':visible');
})
<强> Check FIDDLE 强>