1

いくつかの「li」要素を含むdivがあるとします。チェックボックスをクリックすると、いくつかの要素（li）が選択されます。divに表示されているliから、特定の属性を持つすべてのliを選択したいと思います。たとえば、以下では、最初の3つの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ステートメントは何になりますか。

4

3 に答える 3

5

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');

これは長くて遅いセレクターですが、必要な要素を選択します。

于 2012-10-09T19:31:21.523 に答える
3

ItemAしたがって、とであるすべての表示要素が必要な場合はRed、

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

ただし、@ undefinedが言ったように、colorとvalue属性を使用するのではなく、代わりに適切なhtml5データ属性とを使用する必要がdata-colorありdata-valueます。

<li data-value="ItemA" data-color="Red"><img src="images/1.jpg" /></li>
于 2012-10-09T19:31:45.833 に答える
1

.filter()関数を使用する

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

また

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

FIDDLEを確認してください

于 2012-10-09T19:33:08.703 に答える