jQueryで条件に合致しない要素のみ取得
Posted by admin at 16:23 日時 2013/08/17
こんなHTMLがあったとします。div.tab-pane はタブUIのコンテンツ部分。この div.tab-pane の中に selected という class 属性値を持った li 要素があった場合にそのタブを開き、その他のタブは非表示にしたい。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
jQueryの :has と :not のセレクタを組み合わせて割りとかんたんにできた。便利やね
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(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(); | |
| } | |
| }); |