既に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');
ちょっと見当違いの追記だったかもしれません。
違ってたら無視して下さい・・・