frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

【JQuery】特定の要素以外の要素を取得

スポンサードリンク


スポンサードリンク


特定の属性以外の要素を取得するのは簡単でやり方は何個かあります。

セレクタで絞る

属性!=値で特定の属性以外の要素を取得するができます。

<ul>
<li>texttext</li>
<li>texttext</li>
<li class="third">texttext</li>
<li>texttext</li>
</ul>
$('li[class!="third"]').css('color', 'red');

.notメソッドを使用する

<ul>
<li>texttext</li>
<li>texttext</li>
<li class="third">texttext</li>
<li>texttext</li>
</ul>
$('.b li').not('.third').css('color', 'red');

.hasメソッドを使用する

.hasは逆に特定の子要素を持つ親要素を取得します。

<ul>
<li><span>texttext</span></li>
<li><span>texttext</span></li>
<li>texttext</li>
<li><span>texttext</span></li>
</ul>
$('.c li').has('span').css('color', 'red');

.hasメソッドを打ち消す

.hasメソッドを応用して特定の要素以外の要素を取得したいと思います。

<ul>
<li><span>texttext</span></li>
<li><span>texttext</span></li>
<li>texttext</li>
<li><span>texttext</span></li>
</ul>
$('.d li:not(:has(">span"))').css('color', 'red');

やり方は様々です。
htmlに合わせて使い分けると良いかと思います。

DEMO

See the Pen ryXVvP by funclur (@funclur) on CodePen.