:has()【指定セレクタ要素を持つ要素】

メモ

  • 少なくとも１つの指定セレクタ要素を持つ要素を選択
  • パフォーマンス
    • ネイティブ DOM querySelectorAll() 未使用の為、低速
      純粋なCSSセレクタを使用後、.has( ) を使用した方が高速

構文

jQuery( ":has(selector【セレクタ】)" ) 1.1.4

関連

例

<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
(DIV3 SPAN DIV3)
DIV2)
DIV1)