jQuery API の jQuery( ':not( selector )' ) は、selector に一致する要素以外の要素を選択する。
記述方法
jQuery( 'セレクター①:not( セレクター② )' )
セレクター①に一致した要素のうちの、セレクター②に一致する要素以外の要素を選択する。
実装例(サンプル)
- 項目1
- 項目1-1 ( class=”jquery-api-not”)
- 項目1-2
- 項目2 ( class=”jquery-api-not”)
- 項目2-1
- 項目2-2 ( class=”jquery-api-not”)
- 項目2-2-1 ( class=”jquery-api-not”)
- 項目2-2-2
- 項目2-3
- 項目3
実装例(サンプル)のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( 'ul.jquery-api-smaple li:not( .jquery-api-not )' ) . css( {
border: '3px red double',
listStyleType: 'circle',
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( 'ul.jquery-api-smaple li:not( .jquery-api-not )' ) . css( {
border: '3px red double',
listStyleType: 'circle',
} );
} );
// -->
</script>
HTML
<ul class="jquery-api-smaple">
<li>項目1
<ul>
<li class="jquery-api-not">項目1-1 ( class="jquery-api-not")</li>
<li>項目1-2</li>
</ul>
</li>
<li class="jquery-api-not">項目2 ( class="jquery-api-not")
<ul>
<li>項目2-1</li>
<li class="jquery-api-not">項目2-2 ( class="jquery-api-not")
<ul>
<li class="jquery-api-not">項目2-2-1 ( class="jquery-api-not")</li>
<li>項目2-2-2</li>
</ul>
</li>
<li>項目2-3</li>
</ul>
</li>
<li>項目3</li>
</ul>
<li>項目1
<ul>
<li class="jquery-api-not">項目1-1 ( class="jquery-api-not")</li>
<li>項目1-2</li>
</ul>
</li>
<li class="jquery-api-not">項目2 ( class="jquery-api-not")
<ul>
<li>項目2-1</li>
<li class="jquery-api-not">項目2-2 ( class="jquery-api-not")
<ul>
<li class="jquery-api-not">項目2-2-1 ( class="jquery-api-not")</li>
<li>項目2-2-2</li>
</ul>
</li>
<li>項目2-3</li>
</ul>
</li>
<li>項目3</li>
</ul>