jQuery: .find(), .children(), .next(), .prev() を使った要素選択

2024-04-09

jQueryで現在の要素を選択する方法

$(this) は、イベントが発生した要素を表す特別なセレクタです。イベントハンドラ内で $(this) を使用すると、イベントが発生した要素を選択できます。

例：

<button id="btn">ボタン</button>

$(document).ready(function() {
  $("#btn").click(function() {
    // `$(this)` はクリックされたボタンを表します
    $(this).addClass("active");
  });
});

この例では、#btn ボタンをクリックすると、active クラスがボタンに追加されます。

.eq() メソッドは、要素の集合から特定のインデックスの要素を選択します。

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>

$(document).ready(function() {
  // 2番目の要素を選択します
  $(".item").eq(1).addClass("active");
});

この例では、2番目の .item 要素に active クラスが追加されます。

.filter() メソッドは、条件に合致する要素を選択できます。

<div class="item active">1</div>
<div class="item">2</div>
<div class="item">3</div>

$(document).ready(function() {
  // `.active` クラスを持つ要素を選択します
  $(".item").filter(".active").addClass("selected");
});

この例では、.active クラスを持つ .item 要素に selected クラスが追加されます。

.closest() メソッドは、現在の要素から最も近い親要素を選択します。

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

$(document).ready(function() {
  // `.child` 要素から `.parent` 要素を選択します
  $(".child").closest(".parent").addClass("active");
});

この例では、.child 要素をクリックすると、その要素の親である .parent 要素に active クラスが追加されます。

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

$(document).ready(function() {
  // `.child` 要素から `.parent` 要素を選択します
  $(".child").parent().addClass("active");
});

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

$(document).ready(function() {
  // `.child` 要素から他の `.child` 要素を選択します
  $(".child").siblings().addClass("active");
});

jQueryには、現在の要素を選択するためのさまざまな方法があります。状況に応じて適切な方法を選択してください。

$(this) を使う

<button id="btn">ボタン</button>

$(document).ready(function() {
  $("#btn").click(function() {
    // `$(this)` はクリックされたボタンを表します
    $(this).addClass("active");
  });
});

.eq() を使う

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>

$(document).ready(function() {
  // 2番目の要素を選択します
  $(".item").eq(1).addClass("active");
});

<div class="item active">1</div>
<div class="item">2</div>
<div class="item">3</div>

$(document).ready(function() {
  // `.active` クラスを持つ要素を選択します
  $(".item").filter(".active").addClass("selected");
});

.closest() を使う

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

$(document).ready(function() {
  // `.child` 要素から `.parent` 要素を選択します
  $(".child").closest(".parent").addClass("active");
});

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

$(document).ready(function() {
  // `.child` 要素から `.parent` 要素を選択します
  $(".child").parent().addClass("active");
});

.siblings() を使う

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

$(document).ready(function() {
  // `.child` 要素から他の `.child` 要素を選択します
  $(".child").siblings().addClass("active");
});

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

$(document).ready(function() {
  // `.parent` 要素から `.child` 要素を選択します
  $(".parent").find(".child").addClass("active");
});

この例では、.parent 要素から .child 要素を選択して、active クラスを追加します。

<div class="parent">
  <div class="child">1</div>
  <div class="not-child">2</div>
  <div class="child">3</div>
</div>

$(document).ready(function() {
  // `.parent` 要素から直近の `.child` 要素を選択します
  $(".parent").children(".child").addClass("active");
});

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>

$(document).ready(function() {
  // 2番目の `.item` 要素から次の `.item` 要素を選択します
  $(".item").eq(1).next().addClass("active");
});

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>

$(document).ready(function() {
  // 2番目の `.item` 要素から前の `.item` 要素を選択します
  $(".item").eq(1).prev().addClass("active");
});

jquery