7529

[code]

    obj = $('.hoge', item);
    
[/code]

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

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

[code]

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

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


CC BY-SA 3.0
2015-03-06T03:26:09.383
7521
2015-03-06T04:33:51.310
5840
question
jquery
jQueryで子から親に向かってセレクタを利用するには？


[parents()](http://api.jquery.com/parents/)を使うと、任意のセレクタに適合する親側のノードを見つけることができます。

[code]

    var item = $('item');
    var hoge = item.parents('.hoge');
    
[/code]


CC BY-SA 3.0
2015-03-06T03:31:34.020
7522
2015-03-06T03:31:34.020
3066
7521
answer


こんな感じです。

[code]

      $(document).ready(function() {
        $(document).on('click', 'button', function(){
            $('body').append($(this).parents('.wrapper[number=2]').attr('value'));
        });
    });
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-03-06T04:03:57.977
7525
2015-03-06T04:03:57.977
7214
7521
answer


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

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

[code]

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

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

[code]

    $('button').parents('.hoge');
    
[/code]

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

[code]

    $('button').closest('.hoge');
    
[/code]

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

[code]

    <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');
    
[/code]

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


CC BY-SA 3.0
2015-03-06T04:28:06.343
7529
2015-03-06T04:33:51.310
2015-03-06T04:33:51.310
8078
8078
7521
answer