jQueryで特定の子要素がない場合の処理

Question

jQueryにて、特定の子要素がなければ、親要素にクラスを付与する方法を探しています。
下記のコードで、要素３のliにのみクラスをつける方法です。

<ul>
  <li>
　　　<a>要素１</a>
　　　<button>ボタン１</button>
  </li>
  <li>
　　　<a>要素２</a>
　　　<button>ボタン２</button>
  </li>
  <li><a>要素３</a></li>
</ul>

試したこと

取得したliをeachで1つずつ処理をし、has('button')でbutton要素を持っていなければ、activeクラスを付与、としたかったが、クラスは付与されず、変化はなにもない（エラーは出ていない）。

$(window).on('load', function() {
	var lists = $('ul > li');
	lists.each(function(index, elem) {
		if(!$(elem).has(button)) {
			$(elem).addClass('active');
		}
	});
});

each文の代わりにfor文でも試したが、同様の結果。

$(window).on('load', function() {
　　var lists = $('ul > li');
　　for(var i = 0; i < lists.length; i++) {
　　　if(!$(lists[i]).has(button)) {
　　　　$(lists[i]).addClass('active');
　　　}
　　}
});

試しにif文の条件から'!'を外してみると、全てのliにクラスが付与されてしまった。

$(window).on('load', function() {
	var lists = $('ul > li');
	lists.each(function(index, elem) {
		if($(elem).has(button)) {
			$(elem).addClass('active');
		}
	});
});

has()ではない方法があるのでしょうか。どなたかご教示いただけると幸いです。

Comments

[satokei]

要素３の li にも a要素はあるようですが...

[int32_t]

変数 a に 'button' が入っているということでしょうか。

[hayamin1111]

失礼いたしました。
おっしゃる通りaではなくbuttonです。
has(button)と読み替えていただけると幸いです。

[satokei]

質問は編集できますので、修正してください。

[satokei]

すみません。修正していただいていましたね。

Answer 1

以下のコードでできると思います。

$(window).on('load', function() {
  $('ul > li:not(:has(button))').addClass('active');
});

Comments

[hayamin1111]

ご回答ありがとうございます。
試したところ、無事解決できました。
CSSの擬似クラスを使うというのは盲点でした。
大変助かりました。ありがとうございました。