【jQuery入門】属性値によって目的の要素を絞り込む

属性の値によって対象を絞り込む

attrフィルターを使って、特定の属性を持つ要素だけを取り出す

特定の属性を持つ要素だけを取得する場合は、[attr]フィルターを使う。

<ul id="sample1-list">
  <li class="jquery">
    <a href="#" target="_blank">jQuery</a>
  </li>
  <li class="js">
    <a href="#">JavaScript</a>
  </li>
  <li class="css">
    <a href="#" target="_blank">CSS</a>
  </li>
</ul>

$(function () {
  $("#sample1-list  a[target]").css("background-color", "red");
});

See the Pen
jQuery2-10 by shinjiezumi (@sezumi)
on CodePen.

属性がある値に等しい／等しくない要素だけを取り出す

特定の属性を持つ要素だけを取得する場合は、[attr]フィルターを使う。

特定の属性の中でも、ある値valueを持つ要素だけを取得する場合は、[attr = 'value']フィルターを使う

ある値valueに等しくない要素だけを取得する場合は、[attr != 'value']フィルターを使う

<ul id="sample2-list">
  <li class="jquery">
    <a href="#" target="_blank">jQuery</a>
  </li>
  <li class="js">
    <a href="#">JavaScript</a>
  </li>
  <li class="css">
    <a href="#" target="_self">CSS</a>
  </li>
</ul>

$(function () {
  $('#sample2-list  a[target="_blank"]').css("background-color", "red");
  $('#sample2-list  a[target!="_blank"]').css("background-color", "green");
});

See the Pen
jQuery3-1 by shinjiezumi (@sezumi)
on CodePen.

属性の値が部分的に一致する要素だけを取り出す

部分的に一致する文字列を検出することもできる

<ul id="sample3-list">
  <li class="jquery">
    <a href="http://hogehoge.com" target="_blank">jQuery</a>
  </li>
  <li class="js">
    <a href="https://hogehoge.work">JavaScript</a>
  </li>
  <li class="css">
    <a href="http://fugafuga.net" target="_self">CSS</a>
  </li>
</ul>

$(function () {
  $('#sample3-list  a[href ^= "https"]').css("background-color", "red"); // 前方一致
  $('#sample3-list  a[href $= "com"]').css("background-color", "green"); // 後方一致
  $('#sample3-list  a[href *= "fuga"]').css("background-color", "blue"); // 部分一致
});

See the Pen
jQuery3-2 by shinjiezumi (@sezumi)
on CodePen.

複数の属性フィルターを組み合わせる

[...][...]のように属性フィルターを組み合わせることもできる。

href属性が"http://"で始まり、かつtarget属性が含まれるa要素の背景を黄色にするサンプルです。

<ul id="sample4-list">
  <li class="jquery">
    <a href="http://hogehoge.com" target="_blank">jQuery</a>
  </li>
  <li class="js">
    <a href="http://hogehoge.work">JavaScript</a>
  </li>
  <li class="css">
    <a href="http://fugafuga.net" target="_self">CSS</a>
  </li>
</ul>

$(function () {
  $('#sample4-list  a[href ^= "http://"][target]').css(
    "background-color",
    "yellow"
  );
});

See the Pen
jQuery3-3 by shinjiezumi (@sezumi)
on CodePen.

その他のフィルター

headerフィルターを使って、見出しだけを取り出す

見出しを表すh1、h2~h6要素を取り出す場合は:headerを利用する

<h4>ほげほげ</h4>

$(function () {
  $("#sample5 > :header").css("background-color", "red");
});

See the Pen
jQuery3-4 by shinjiezumi (@sezumi)
on CodePen.

notフィルターを使って、セレクターに合致しない要素を取り出す

指定されたセレクター(selector)に合致しない要素だけを取り出す場合は、:not(selector)を利用する

<ul id="sample6-list">
  <li class="jquery">
    <a href="http://hogehoge.com" target="_blank">jQuery</a>
  </li>
  <li class="js">
    <a href="http://hogehoge.work">JavaScript</a>
  </li>
  <li class="css">
    <a href="http://fugafuga.net" target="_self">CSS</a>
  </li>
</ul>

$(function () {
  $("#sample6-list a:not([target])").css("background-color", "red");
});

See the Pen
jQuery3-5 by shinjiezumi (@sezumi)
on CodePen.

状態でアクセスすべき要素を絞り込む

チェック済みである、アニメーションが実行中であるなど、要素の状態から絞り込むこともできる

:enabled

フォーム要素が利用可能な状態にある場合

:disabled

フォーム要素が利用不可の状態にある場合

:checked

ラジオボタンやチェックボックスがチェック状態にある場合

:selected

選択ボックスが選択状態にある場合

:hidden

要素が非表示状態の場合

:visible

要素が表示状態の場合

:animated

要素がアニメーション中である場合

<div id="sample7-list">
  <p>性別</p>
  <label for="m"><input id="m" type="radio" name="gender" value="m">男性</label>
  <label for="f"><input id="f" type="radio" name="gender" value="f" checked>女性</label>
</div>

$(function () {
  $("#sample7-list label:has(:checked)").css("background-color", "red"); // ページを開いた時のみ実行
});

See the Pen
jQuery3-6 by shinjiezumi (@sezumi)
on CodePen.

セレクター選択のコツ

$()関数による要素の取得は、jQueryにおける基本であり、最も良く利用する機能。

それだけに引き渡すべきセレクターをうまく使いこなせるかどうかは、そのままページ全体のパフォーマンスを左右することになる。

より効率的なセレクターを選択する指針について、以下の順序で優先的に利用する

1. #id(id値で検索)、element(要素名で検索)
2. .class(class属性で検索)
3. 1,2,4以外のセレクター
4. jQuery独自の拡張セレクター

まず、1のセレクターは内部的にはブラウザ標準で用意されているgetElementById, getElementByTagNameというメソッドで置き換えられるので、全ての環境で高速に動作する

2,3のセレクターも、内部的にはgetElementByClassName, querySelectorAllメソッドで置き換えらる。しかし、IE8以前では未対応でjQueryが独自の解析を行う必要があるため、パフォーマンスは低下する

最後に、4は常にjQueryが独自に処理しなければならないので低速。できるだけ利用すべきではないし、利用する際も「本当に必要か」「他で置き換えられないか」を検討したうえで、使用箇所を最小限に止めるようにする

jQuery独自の拡張フィルター

属性

[attr != value]

要素の順序

:eq, :gt, :lt, :even, :odd, :first, :last

親子／兄弟

:parent, :has

その他

:header, :animated, :selected, :visible