43
38

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

jquery兄弟要素の指定方法まとめ

Posted at

2015-07-29_1900.png
主に参考にしたサイト
jQuery 兄弟要素の取得と操作 – 自分以外の兄弟、自分以降の兄弟、自分以前の兄弟等

テーブル組をしていて
toggleボタンを押したら上下両方のテーブル要素が選択されるように
jqueryを調整したい、ということでjqueryの兄弟要素の選択方法をlearning。

###自分以外の要素
.sibling() 要素を使う

###自分(含めずに)の一つ後の要素
.next() 要素を使う

()内には.next('p')のようにフィルタを掛けることが可能。()が空欄の場合はその後の要素すべてが対象となる。

###自分(含めずに)の後のすべての要素
.nextAll() 要素をもちいる

###自分(含めずに)の一つ前の要素
.prev() 要素を使う

HTML
$("button").click(function () {
  $curr = $curr.prev();
  $("div").css("background", "");
  $curr.css("background", "#f99");
});

のように書くと、クリックするたびにセレクタを変更することが可能。

###自分(含めずに)の前のすべての要素
.prevAll() 要素を使う

43
38
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
43
38

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?