jQuery 複合セレクターのいくつかの例

1. チェックボックスに関する複合セレクター関連の操作

<input type="checkbox" id="ckb_1" /> 
<input type="checkbox" id="ckb_2" disabled="true" /> 
<input type="checkbox" id="ckb_3" /> 
<input type="checkbox" id="ckb_4" /> 
<input type="button" id="btn" value="点击">

例: タイプ チェックボックスの要素を設定し、「利用可能」を「選択済み」に設定する必要があります

方法① 属性フィルターセレクター [type='checkbox'] と [disabled!=disabled] を使用する

$("input[type='checkbox'][disabled!=disabled]").attr("checked",true);

この複合セレクターでは、「available」要素を選択するにはdisabled!=disabledを使用し、属性を設定する場合はattr("checked",true)を使用する必要があることに注意してください。 disabled 属性は、checked 属性と同様に使用されます。

方法②フォームセレクター:checkboxと属性フィルターセレクター[disabled!=disabled]を使用する

$('input:checkbox[disabled!=disabled]').attr("checked",true);

方法③ フォームセレクター :checkbox とフォームオブジェクト属性フィルターセレクター :enabled を使用する

$(':checkbox:enabled').attr("checked",true);

方法④ .each() を使用して走査する

$("input[type=checkbox]").each(function(){

if ($(this).attr("disabled") != "disabled") {

$(this).attr("checked",true);
}
});

複合セレクターは使用されません。注意すべき点は方法①と同様で、属性を判断する際はfalseかtrueではなく、「disabled」か「enable」かを判断する必要があります。プロパティを設定するときは、「disabled」または「enable」を使用するか、false または true を使用できます。

2. 複合セレクターのその他の例

<ul>
<li >第一行</li>
<li class="showli">第二行</li>
<li class="showli">第三行</li>
<li>第四行</li>
<li style="display:none">第五行</li>
<li class="showli">第六行</li>
<li>第七行</li>
</ul>

例: showli クラスの最初の li 要素の背景を赤に設定します

$("ul li[class=showli]:eq(0)").css("background":"red");

その結果、「

2 行目

」の背景が赤になります。属性フィルター セレクター [class=showli] と基本フィルター セレクター eq(0)

が使用されます

例: 5 番目に表示される li の背景を赤に設定します

$("ul li:visible:eq(4)").css({"display":"blaock","background":"red"});

その結果、「

6 行目

」の背景が赤色になります。これは、非表示の li が :visible、display によってフィルタされるかどうかを検出するためです。 ：何もない状態では赤背景が見えません。使用される可視性フィルターセレクター:visible

例 (かなり複雑です) showli クラスで 2 番目の li の後ろに表示される 2 番目の li の背景を赤に設定します

$("ul li.showli:eq(1)").nextAll("li:visible:eq(1)").css({"display":"block","background":"red"});

その結果、「

6 行目

」の背景が赤くなります。