Blog

jQueryで条件に合致しない要素のみ取得

Posted by admin at 16:23 日時 2013/08/17

こんなHTMLがあったとします。div.tab-pane はタブUIのコンテンツ部分。この div.tab-pane の中に selected という class 属性値を持った li 要素があった場合にそのタブを開き、その他のタブは非表示にしたい。

<ul class="nav nav-tabs" id="myTab">
<li><a href="#cat-a">Category A</a></li>
<li><a href="#cat-b">Cagetory B</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="cat-a">
<ul>
<li class="selected"><a href="">Tag A</a></li>
<li><a href="">Tag B</a></li>
<li><a href="">Tag C</a></li>
<li><a href="">Tag D</a></li>
</ul>
</div>
<div class="tab-pane" id="cat-b">
<ul>
<li><a href="">Tag E</a></li>
<li><a href="">Tag F</a></li>
<li><a href="">Tag G</a></li>
<li><a href="">Tag H</a></li>
</ul>
</div>
</div>
view raw gistfile1.html hosted with ❤ by GitHub

jQueryの :has と :not のセレクタを組み合わせて割りとかんたんにできた。便利やね

$(function() {
if ($("div.tab-pane:has(li.selected)").length > 0) {
$("div.tab-pane:not(:has(li.selected))").hide();
} else {
$("div.tab-pane:not(:eq(0))").hide();
}
});
view raw gistfile2.js hosted with ❤ by GitHub

Refs:


Share this entry