セレクタで親要素の兄弟を指定

Question

下記のように.barから見たときに.hogeをセレクタで指定したいと考えております。
つまり親要素（.fuga）の兄弟二当たるともうのですが、このような指定は可能でしょうか。

アドバイスを頂ければ幸いです。
よろしくお願い申し上げます。

<div class="hoge"></div>
<div class="fuga">
  <div class="foo"></div>
  <div class="bar"></div>
</div>

Answer 1

:has()

解決済ですが、「セレクタで指定」という条件でしたので、セレクタのみで実装した別解を書いておきます。

• 4.5. 関係上の疑似クラス： :has() - Selectors Level 4 （日本語訳）
• jQuery セレクタで親要素の兄弟を指定 - JSFiddle

jQuery(':has(+*>.bar)');

Re: pegy さん

Answer 2

えっと、.barが含まれている.fugaの前の.hogeを取得したいってことでいいですかね

「…の前の」は、セレクタではとれないので.prev()を使用して

$('.fuga:has(.bar)').prev('.hoge')

これでいけないですかね

Comments

[pegy]

コメントありがとうございます。
アドバイスの方法でもいけました、大変助かりました。

Answer 3

divのとじかたがおかしいです

<script>
$(function(){
  console.log($('.bar').parent().siblings().attr('class'));
});
</script>
<div class="hoge"></div>
<div class="fuga">
  <div class="foo"></div>
  <div class="bar"></div>
</div>

ただし、barはクラスなので一つだとは限らず。siblingsも一つだとはかぎりませんので
きちんとやるなら

  console.log($('.bar').eq(0).parent('div').siblings().eq(0).attr('class'));

Comments

[pegy]

コメントありがとうございます。
無事解決いたしました！