:has()【指定セレクタ要素を持つ要素】
メモ
- 少なくとも1つの指定セレクタ要素を持つ要素を選択
- パフォーマンス
- ネイティブ DOM querySelectorAll() 未使用の為、低速
純粋なCSSセレクタを使用後、.has( )
を使用した方が高速
- ネイティブ DOM querySelectorAll() 未使用の為、低速
構文
jQuery( ":has(selector【セレクタ】)" ) 1.1.4
関連
- jQuery リファレンス メモ
- セレクタ一覧
- .has()【所有要素 取得】
- jQuery (英語)
例
<ul id="id1">
<li><span id="id11">項目</span>
<li><span id="id12">項目</span>
<li><span class="class11">項目</span>
<li><span class="class12">項目</span>
<li>項目
<li><i>項目</i>
</ul>
<script>
$( "#id1 :has(#id12)" ).css( "color", "red" ).append( " (#id12)" );
$( "#id1 :has(.class12)" ).css( "color", "red" ).append( " (.class12)" );
$( "#id1 :has(i)" ).css( "color", "red" ).append( " (i)" );
</script>
- 項目
- 項目
- 項目
- 項目
- 項目
- 項目
<style>
.style2 { width:100px; border:2px red dashed; padding:10px; }
</style>
<div id="id2">(DIV1
<div>(DIV2
<div>(DIV3
<span>SPAN</span>
DIV3)</div>
DIV2)</div>
DIV1)</div>
<script>
$( "#id2 :has(span)" ).addClass( "style2" );
</script>
(DIV1
(DIV2
DIV1)(DIV3 SPAN DIV3)
DIV2)