2
obj = $('.hoge', item);

と記述すると、itemのノードに対して.hogeを検索することができますが
itemからitemのparentに向かって.hogeを検索するにはどうすればよいですか?

つまり以下の様なHTMLのボタンをクリックした時に
ボタンから、ボタンを囲んでいるコンテナのみを見つけたいのですが、そのような関数は存在しますでしょうか。

<div class="container">
  <button>コンテナを見つける</button>
</div>

<div class="container">
  <p>
    <button>コンテナを見つける</button>
  </p>
</div>

できれば、.container:first.container[id=3]といった
複雑なセレクタも利用できるようなものが望ましいです。

3 件の回答 3

6

既にparentsメソッドが紹介されていますが、用途によってはclosestも便利です。

HTMLが下記のような構成だとします。

<div class="hoge">
    <div class="hoge fuga">
        <div>
            <button>ボタン</button>
        </div>
    </div>
</div>

parents()は親方向に向けて、セレクタにマッチする全ての要素を返すため、下記のコード(parents)は<div class="hoge"><div class="hoge fuga">の2つを返します。

$('button').parents('.hoge');

一方、closest()も同じく親方向に探しに行くのですが、こちらは最も近い要素だけを返すので、下記のコードは<div class="hoge fuga">だけを得られます。

$('button').closest('.hoge');

【追記】
ただし、どちらもあくまで基準の要素からひたすら親要素を辿るだけですので、質問にあるように.containerが複数あり、その内の:firstだけを探す、といったことはできません。
その場合は.containerを含む更に上の親要素をclosest()で探し、そこからchildren()find()で目当ての要素を探すのが良いでしょう。

<div class="root">
  <div class="container">
    <button>コンテナを見つける</button>
  </div>

  <div class="container">
    <p>
      <button id="btn1">コンテナを見つける</button>
    </p>
  </div>
</div>

$('#btn1').closest('.root').find('.container:first');

ちょっと見当違いの追記だったかもしれません。
違ってたら無視して下さい・・・

1
  • 実はこっちのほうが求めていた処理でした。 .container:firstとしていましたが、こちらを利用させていただきます。 ありがとうございました。
    – hojo
    Commented 2015年3月6日 4:31
3

parents()を使うと、任意のセレクタに適合する親側のノードを見つけることができます。

var item = $('item');
var hoge = item.parents('.hoge');
1
  • ありがとうございましたm(_ _)m
    – hojo
    Commented 2015年3月6日 4:06
2

こんな感じです。

  $(document).ready(function() {
    $(document).on('click', 'button', function(){
        $('body').append($(this).parents('.wrapper[number=2]').attr('value'));
    });
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="contents">
    <div number="1" class="wrapper" value="value1">
        <div number="2" class="wrapper" value="value2">
            <div number="3" class="wrapper" value="value3">
                <button>ボタン</button>
            </div>
        </div>
    </div>
</div>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。