jQueryでchildren()メソッドとfind()メソッドの違い

2024-04-05

jQueryで(this)セレクタの子要素を取得する方法

children()メソッド

$(this).children();

このコードは、$(this)セレクタで選択された要素の直接の子要素のみを取得します。孫要素やひ孫要素は取得されません。

例

<div id="parent">
  <div class="child1">子要素1</div>
  <div class="child2">子要素2</div>
  <div class="grandchild">孫要素</div>
</div>

$("#parent").children().click(function() {
  alert($(this).text());
});

このコードは、#parent要素の子要素である.child1と.child2がクリックされた時に、それぞれの子要素のテキスト内容をアラートで表示します。.grandchild要素はクリックされてもアラートは表示されません。

find()メソッド

$(this).find("*");

<div id="parent">
  <div class="child1">子要素1</div>
  <div class="child2">
    <div class="grandchild">孫要素</div>
  </div>
</div>

$("#parent").find("*").click(function() {
  alert($(this).text());
});

このコードは、#parent要素の子要素および孫要素である.child1、.child2、.grandchildがクリックされた時に、それぞれの子要素のテキスト内容をアラートで表示します。

上記以外にも、以下のような方法で子要素を取得できます。

直接子要素のセレクタ：直接の子要素のみを取得したい場合は、直接子要素のセレクタを使用できます。例：$("#parent > .child") * **each()メソッド**：子要素をループ処理したい場合は、each()メソッドを使用できます。例：$("#parent").children().each(function() { ... });

jQueryで$(this)セレクタの子要素を取得するには、children()メソッドとfind()メソッドの2つの主要な方法があります。それぞれの方法の特徴を理解し、目的に合った方法を選択することが重要です。

<div id="parent">
  <div class="child1">子要素1</div>
  <div class="child2">子要素2</div>
  <div class="grandchild">孫要素</div>
</div>

$("#parent").children().click(function() {
  alert($(this).text());
});

出力

子要素1
子要素2

<div id="parent">
  <div class="child1">子要素1</div>
  <div class="child2">
    <div class="grandchild">孫要素</div>
  </div>
</div>

$("#parent").find("*").click(function() {
  alert($(this).text());
});

子要素1
子要素2
孫要素

<div id="parent">
  <div class="child1">子要素1</div>
  <div class="child2">子要素2</div>
  <div class="grandchild">孫要素</div>
</div>

$("#parent > .child").click(function() {
  alert($(this).text());
});

子要素1
子要素2

<div id="parent">
  <div class="child1">子要素1</div>
  <div class="child2">子要素2</div>
  <div class="grandchild">孫要素</div>
</div>

$("#parent").children().each(function() {
  alert($(this).text());
});

子要素1
子要素2

直接の子要素のみを取得したい場合は、直接子要素のセレクタを使用できます。

<div id="parent">
  <div class="child1">子要素1</div>
  <div class="child2">子要素2</div>
  <div class="grandchild">孫要素</div>
</div>

// 直接の子要素のみ取得
$("#parent > .child").click(function() {
  alert($(this).text());
});

子要素1
子要素2

closest()メソッド

特定の親要素の子要素を取得したい場合は、closest()メソッドを使用できます。

<div id="parent">
  <div class="child1">
    <div class="grandchild">孫要素</div>
  </div>
  <div class="child2">子要素2</div>
</div>

// .child1要素の子要素のみ取得
$(".grandchild").closest(".child1").click(function() {
  alert($(this).text());
});

子要素1

siblings()メソッド

<div id="parent">
  <div class="child1">子要素1</div>
  <div class="child2">子要素2</div>
  <div class="child3">子要素3</div>
</div>

// .child2要素の兄弟要素を取得
$(".child2").siblings().click(function() {
  alert($(this).text());
});

子要素1
子要素3

<div id="parent">
  <div class="child1">子要素1</div>
  <div class="child2">子要素2</div>
  <div class="child3 visible">子要素3</div>
</div>

// .visibleクラスを持つ子要素のみ取得
$("#parent").children().filter(".visible").click(function() {
  alert($(this).text());
});

子要素3

<div id="parent">
  <div class="child1">子要素1</div>
  <div class="child2">子要素2</div>
  <div class="child3">子要素3</div>
</div>

// 2番目の子要素を取得
$("#parent").children().eq(1).click(function() {
  alert($(this).text());
});

子要素2

javascript jquery jquery-selectors