:has()

$(':has(selector)') 1.1.4追加

指定した要素を子要素内に持つエレメントを選択します。

項目 説明
selector セレクタを指定します。

$('div:has(p)')と指定した場合、<div<内に<p>が存在していれば、DIV要素が選択されます。 子要素であるP要素が直接選択されないことに注意してください。

:has()はjQueryが独自に拡張した仕組みでCSSには存在しない概念です。 そのため、querySelectorAll()によって提供されるパフォーマンスを享受することが出来ません。 最高のパフォーマンスを出すためには、純粋なCSSセレクタのみを使用して要素を特定し、 それに対して$("your-pure-css-selector").has(selector/またはDOM要素)を適用してください。

デモ

P要素を内部に持つDIV要素にtestクラスを割り当てます。

<!DOCTYPE html>
<html>
<head>
<style>
  .test{ border: 3px dotted red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div><p>ここに、P要素があります。</p></div>
<div>ここには、P要素はありません。</div>
<script>$("div:has(p)").addClass("test");</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM