子要素がない場合に上部に隣接する要素にクラスを付与したい

Question

子要素がない場合に上部に隣接する要素にクラスを付与したいです。

「box」というクラスに子要素がない場合、
隣接する上部の「h3」にクラスを付けたいのですが上手くいきませんでした

わかる方がおりましたら教えていただけないでしょうか

発生している問題・エラーメッセージ

クラスが上手く付与できない状態です

該当のソースコード

<div class="wrap">
	<h3><span>XXX</span></h3>
	<div class="box">
		<a href="">test</a>
	</div>
	<h3><span>XXX</span></h3>
	<div class="box">
	</div>
</div>

<script>
$(function(){
    if($('.box').find('a').length){
    } else {
	  $(this).prev('h3').addClass('hoge');
    }

});	
</script>

Answer 1

h3側からアプローチする手もありますね

  $('h3').toggleClass(function(){
    return $(this).next('div:has(a)').length?"hoge":"";
  });

Comments

[pontas]

ご連絡ありがとうございます。
参考にさせて頂きます。

Answer 2

複数の要素がある場合は、eachで繰り返し処理する必要があります。

$(function(){
  $('.box').each(function(){
    if($(this).find('a').length){
    } else {
      $(this).prev('h3').addClass('hoge');
    }
  });
});

下記のような書き方もできます。

$(function(){
  $('.box:not(:has(a))').each(function(){
      $(this).prev('h3').addClass('hoge');
  });
});    

Comments

[pontas]

ありがとうございます。
勉強になりました。