jQueryで子から親に向かってセレクタを利用するには？

Question

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]といった
複雑なセレクタも利用できるようなものが望ましいです。

Answer 1

既に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');

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

Answer 2

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

var item = $('item');
var hoge = item.parents('.hoge');

Answer 3

こんな感じです。

  $(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>