【jQuery入門】フィルターを利用して目的の要素を絞り込む

登録順序によって取得する要素を絞り込む

first／lastフィルターを使って、最初／最後の要素を取り出す

最初、または最後の要素を取り出すには、:first, :lastフィルターを使う

<ul id="sample1-list">
  <li class="jquery">jQuery</li>
  <li class="js">JavaScript</li>
  <li class="css">CSS</li>
</ul>

$(function () {
  $("#sample1-list > li:first").css("background-color", "red");
  $("#sample1-list > li:last").css("background-color", "#1dd");
});

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

even／oddフィルターを使って、偶数/奇数番目の要素を取り出す

偶数番目、または奇数番目の要素を取り出すには、:even, :oddフィルターを使う。

<ul id="sample2-list">
  <li class="jquery">jQuery</li>
  <li class="js">JavaScript</li>
  <li class="css">CSS</li>
  <li class="css">PHP</li>
</ul>

$(function () {
  $("#sample2-list > li:even").css("background-color", "red");
  $("#sample2-list > li:odd").css("background-color", "#1dd");
});

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

eqフィルターを使って、　n番目の要素を取り出す

n番目の要素を取り出すには、:eq(n-1)フィルターを使う。

<ul id="sample3-list">
  <li class="jquery">jQuery</li>
  <li class="js">JavaScript</li>
  <li class="css">CSS</li>
</ul>

$(function () {
  $("#sample3-list > li:eq(1)").css("background-color", "red");
});

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

lt／gtフィルターを使って、n番目より前／n番目より後ろの要素を取り出す

n番目より前の要素を取り出すには:lt(n-1)、n番目より後ろの要素を取り出すには:gt(n-1)というフィルターを使う

<ul id="sample4-list">
  <li class="jquery">jQuery</li>
  <li class="js">JavaScript</li>
  <li class="css">CSS</li>
  <li class="css">PHP</li>
</ul>

$(function () {
  $("#sample4-list > li:lt(1)").css("background-color", "red");
  $("#sample4-list > li:gt(1)").css("background-color", "blue");
});

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

子要素、テキストによって要素を絞り込む

containsフィルターを使って、配下に特定のテキストを含んだ要素を取り出す

指定されたテキストtextを含んだ要素だけを取り出すには:contains(text)フィルターを使う

なお、文字列の大文字／小文字は区別される

<ul id="sample5-list">
  <li class="jquery">jQuery</li>
  <li class="js">JavaScript</li>
  <li class="css">CSS</li>
  <li class="css">javascript</li>
</ul>

$(function () {
  $("#sample5-list > li:contains(JavaScript)").css("background-color", "red");
});

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

parent／emptyフィルターを使って、内容を持つ／持たない要素を取り出す

内容を持つ要素を取得するには:parentフィルターを、持たない要素を取得するには:emptyフィルターを利用する

<div id="sample6-list">
  <div>
    <span>hogehoge</span>
  </div>
  <div></div>
</div>

$(function () {
  $("#sample6-list > div:parent").css("background-color", "red");
  $("#sample6-list > div:empty").text("fugafuga");
});

See the Pen
Untitled by shinjiezumi (@sezumi)
on CodePen.

parent／emptyフィルターを使って、内容を持つ／持たない要素を取り出す

内容を持つ要素を取得するには:parentフィルターを、持たない要素を取得するには:emptyフィルターを利用する

<div id="sample6-list">
  <div>
    <span>hogehoge</span>
  </div>
  <div></div>
</div>

$(function () {
  $("#sample6-list > div:parent").css("background-color", "red");
  $("#sample6-list > div:empty").text("fugafuga");
});

See the Pen
Untitled by shinjiezumi (@sezumi)
on CodePen.

hasフィルターを使って、指定したセレクターに合致する子要素を含んだ要素を取り出す

指定したセレクターselectorに合致する子要素をかどうかは、:has(selector)で絞り込むことができる

<ul id="sample7-list">
  <li>おはよう</li>
  <li>こんにちは</li>
  <li>こんばんは、<span>XXさん</span></li>
</ul>

$(function () {
  $("#sample7-list > :has(span)").css("background-color", "red");
});

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

子要素を取得するフィルター

first-child／last-childフィルターを使って、先頭、または末尾の子要素を取り出す

最初の子要素を取得するには:first-child、最後の子要素を取得するには:last-childフィルターを利用する

<ul id="sample8-list">
  <li>おはよう</li>
  <li>こんにちは</li>
  <li>こんばんは、<span>XXさん</span></li>
</ul>

$(function () {
  $("#sample8-list :first-child").css("background-color", "red");
  $("#sample8-list :last-child").css("background-color", "blue");
});

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

nth-childを使って、n個ごとに子要素を取り出す

n個ごとの子要素を取得するには、:nth-childフィルターを利用する

「2n」の部分が「２個ごと」を意味する。さらに「2n+1」とすることで「2で割ったときに1余る」番目を表現することができる

その他、偶数番目／奇数番目であればeven、oddを指定する

固定値であればnth-child(2)のように指定する

<ul id="sample9-list">
  <li>１</li>
  <li>２</li>
  <li>３</li>
  <li>４</li>
  <li>５</li>
  <li>６</li>
  <li>７</li>
</ul>

$(function () {
  $("#sample9-list > li:nth-child(3n)").css("background-color", "red");
  $("#sample9-list > li:nth-child(4n+1)").css("background-color", "blue"); // 1（n = 0の場合）にも適用
  $("#sample9-list > li:nth-child(5n-1)").css("background-color", "green");
  $("#sample9-list > li:nth-child(7)").css("background-color", "orange");
});

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

only-childを使って、唯一の子要素であるものだけを取り出す

その要素が親要素にとって唯一の子要素である要素を取得するには、:only-childフィルターを利用する

<div id="sample10-list">
  <div>
    <img src="https://placehold.jp/150x150.png" alt="">
  </div>
  <div>
    <img src="https://placehold.jp/150x150.png" alt="">
    <img src="https://placehold.jp/200x200.png" alt="">
  </div>
  <div>
    <img src="https://placehold.jp/150x150.png" alt="">
    ほげほげ
  </div>
  <div>
    <img src="https://placehold.jp/150x150.png" alt="">
    ほげほげ
    <span>ふがふが</span>
  </div>
</div>

$(function () {
  $("#sample10-list img:only-child").css("border", "solid 3px red");
});

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