属性セレクタ

メモ

  • 属性名・属性値により要素を選択
    • 属性セレクタ (存在)：指定属性が存在
      指定属性が存在しない要素は、$(":not([attribute])")  ( 例 参照)
    • 属性セレクタ (完全一致) =：属性値が指定属性値と一致
    • 属性セレクタ (先頭一致) ^=：属性値の先頭が指定属性値と一致
    • 属性セレクタ (末尾一致) $=：属性値の末尾が指定属性値と一致
    • 属性セレクタ (部分一致) *=：属性値の一部が指定属性値と一致
    • 属性セレクタ (リスト項目一致) ~= ：スペース区切りの属性値の１つが指定属性値と一致
    • 属性セレクタ (プレフィックス) |= ：属性値が指定属性値と一致 または 属性値の先頭が指定属性値の後にハイフン(-)を付けた値と一致
    • 属性セレクタ (否定) != ：属性値が指定属性値以外  ( :not("[【attribute：属性名】='【value：属性値】']") と同等 )
      ネイティブ DOM querySelectorAll() 未使用の為、低速
      純粋なCSSセレクタを使用後、 :not("[【attribute：属性名】='【value：属性値】']") とした方が高速  ( 例 参照)
    • 属性セレクタ (複数 AND)：複数の属性フィルタ全てを満たす

構文

【パラメータ】
attribute：属性名
value：属性値
attributeFilter1 ～ attributeFilterN：属性フィルタ


【属性セレクタ (存在)】
jQuery( "[attribute]" ) 1.0


【属性セレクタ (完全一致)】
jQuery( "[attribute='value']" ) 1.0


【属性セレクタ (先頭一致)】
jQuery( "[attribute^='value']" ) 1.0


【属性セレクタ (末尾一致)】
jQuery( "[attribute$='value']" ) 1.0


【属性セレクタ (部分一致)】
jQuery( "[attribute*='value']" ) 1.0


【属性セレクタ (リスト項目一致)】
jQuery( "[attribute~='value']" ) 1.0


【属性セレクタ (プレフィックス)】
jQuery( "[attribute|='value']" ) 1.0


【属性セレクタ (否定)】
jQuery( "[attribute!='value']" ) 1.0


【属性セレクタ (複数 AND)】
jQuery( "[attributeFilter1]～[attributeFilterN]" ) 1.0

関連

例

<div id="id1">
  <p><input id="inputA" name="Start" value="123" class="classA classB">
    &lt;input id="inputA" name="Start" value="123" class="classA classB"&gt;</p>
  <p><input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja">
    &lt;input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja"&gt;</p>
  <p><input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled>
    &lt;input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled&gt;</p>
  <p><input id="inputD" name="Middle" value="123" class="classD classE" lang="en">
    &lt;input id="inputD" name="Middle" value="123" class="classD classE" lang="en"&gt;</p>
  <p><input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US">
    &lt;input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US"&gt;</p>
  <p><input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled>
    &lt;input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled&gt;</p>
</div>

<p id="out1" style="border:1px blue solid; padding:5px;">【出力】</p>

<script>
var msg = "";
var elms;
var i;

msg += "【属性セレクタ (存在)】[disabled]<br>";
elms = $( "#id1 [disabled]" );
for (i = 0; i < elms.length; i++) {
  msg += "id='" + elms[i].id + "' disabled=" + elms[i].disabled + "<br>";
}

msg += "<br>【属性セレクタ (完全一致)】[value='456']<br>";
elms = $( "#id1 [value='456']" );
for (i = 0; i < elms.length; i++) {
  msg += "id='" + elms[i].id + "' value='" + elms[i].value + "'<br>";
}

msg += "<br>【属性セレクタ (先頭一致)】[name^='Start']<br>";
elms = $( "#id1 [name^='Start']" );
for (i = 0; i < elms.length; i++) {
  msg += "id='" + elms[i].id + "' name='" + elms[i].name + "'<br>";
}

msg += "<br>【属性セレクタ (末尾一致)】[name$='End']<br>";
elms = $( "#id1 [name$='End']" );
for (i = 0; i < elms.length; i++) {
  msg += "id='" + elms[i].id + "' name='" + elms[i].name + "'<br>";
}

msg += "<br>【属性セレクタ (部分一致)】[name*='Middle']<br>";
elms = $( "#id1 [name*='Middle']" );
for (i = 0; i < elms.length; i++) {
  msg += "id='" + elms[i].id + "' name='" + elms[i].name + "'<br>";
}

msg += "<br>【属性セレクタ (リスト項目一致)】[class~='classD']<br>";
elms = $( "#id1 [class~='classD']" );
for (i = 0; i < elms.length; i++) {
  msg += "id='" + elms[i].id + "' class='" + elms[i].className + "'<br>";
}

msg += "<br>【属性セレクタ (プレフィックス)】[lang|='en']<br>";
elms = $( "#id1 [lang|='en']" );
for (i = 0; i < elms.length; i++) {
  msg += "id='" + elms[i].id + "' lang='" + elms[i].lang + "'<br>";
}

msg += "<br>【属性セレクタ (否定)】input[value!='456']<br>";
elms = $( "#id1 input[value!='456']" );
for (i = 0; i < elms.length; i++) {
  msg += "id='" + elms[i].id + "' value='" + elms[i].value + "'<br>";
}

msg += "<br>【属性セレクタ (否定)】.not( \"[value='456']\" )<br>";
elms = $( "#id1 input" ).not( "[value='456']" );
for (i = 0; i < elms.length; i++) {
  msg += "id='" + elms[i].id + "' value='" + elms[i].value + "'<br>";
}

msg += "<br>【属性セレクタ (複数 AND)】[name*='Middle'][value!='456'][class~='classC']<br>";
elms = $( "#id1 [name*='Middle'][value!='456'][class~='classC']" );
for (i = 0; i < elms.length; i++) {
  msg += "id='" + elms[i].id + "' name='" + elms[i].name + "' value='" + elms[i].value + "' class='" + elms[i].className + "'<br>";
}

$( "#out1" ).html(msg);
</script>

<input id="inputA" name="Start" value="123" class="classA classB">

<input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja">

<input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled>

<input id="inputD" name="Middle" value="123" class="classD classE" lang="en">

<input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US">

<input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled>

【出力】


<div id="id2">
  <p><input id="inputA2" name="Start" value="123" class="classA classB">
    &lt;input id="inputA2" name="Start" value="123" class="classA classB"&gt;</p>
  <p><input id="inputB2" name="StartMiddle" value="456" class="classB classC" lang="ja">
    &lt;input id="inputB2" name="StartMiddle" value="456" class="classB classC" lang="ja"&gt;</p>
  <p><input id="inputC2" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled>
    &lt;input id="inputC2" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled&gt;</p>
  <p><input id="inputD2" name="Middle" value="123" class="classD classE" lang="en">
    &lt;input id="inputD2" name="Middle" value="123" class="classD classE" lang="en"&gt;</p>
  <p><input id="inputE2" name="MiddleEnd" value="456" class="classE classF" lang="en-US">
    &lt;input id="inputE2" name="MiddleEnd" value="456" class="classE classF" lang="en-US"&gt;</p>
  <p><input id="inputF2" name="End" value="789" class="classF classG" lang="en-UK" disabled>
    &lt;input id="inputF2" name="End" value="789" class="classF classG" lang="en-UK" disabled&gt;</p>
</div>

<script>
$( "#id2 input:not([disabled])" ).css( "border", "2px red dashed");
</script>

<input id="inputA2" name="Start" value="123" class="classA classB">

<input id="inputB2" name="StartMiddle" value="456" class="classB classC" lang="ja">

<input id="inputC2" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled>

<input id="inputD2" name="Middle" value="123" class="classD classE" lang="en">

<input id="inputE2" name="MiddleEnd" value="456" class="classE classF" lang="en-US">

<input id="inputF2" name="End" value="789" class="classF classG" lang="en-UK" disabled>