:has()
- $(':has(selector)') 1.1.4追加
- デモ
$(':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>
© 2010 - 2017 STUDIO KINGDOM