HOME>WEBプログラム覚書>[jQuery]closest()とparents()
[jQuery]closest()とparents()
今から16年前Netscapeブラウザのソースコードの公開方法の会議の中で、初めてオープンソースという言葉が使われた今日、
みなさんいかがお過ごしでしょうか。
今回の投稿はそれとは関係のないjQueryのparents()とclosest()が
似てたので何が違うのか試した時のメモです。
closest()とparents()
closest([expr])は選択されたDOM要素の親要素で一番最初に[expr]にマッチした要素を取得します。
サンプル
Javascript
$('.jqTest span').closest('p').css('border', '3px solid #555555');
HTML
<div class="jqTest">
<div>
<p><span>$().closest()は便利だよ。</span></p>
</div>
</div>
これは下記と同じ結果になりますです。
javascript
$('.jqTest span').parents('p').first().css('border', '3px solid #555555');
closest()ができること
closest()の場合、選択したDOM要素も検索対象となります。
サンプル
Javascript
// 要素が見つかればボーダーが付く
$('.jqTest2 .target').closest('.target').css('border', '3px solid #555555');
// 要素が見つかれば背景が付く
$('.jqTest2 .target').parents('.target').first().css('background', '#CCCCCC');
HTML
<div class="jqTest2">
<div>
<p><span class="target">$().closest()は便利だよ。</span></p>
</div>
</div>
parents()ができること
closest()は最初のDOM要素だけですが、parents([expr])は[expr]にマッチする親要素全て取得します。
サンプル
Javascript
$('.jqTest3 p').each(function(i){
if ($(this).data('func') === 'closest') {
$(this).closest('div.wrap').css({ border: '3px solid #555555', padding: 10});
} else if ($(this).data('func') === 'parents') {
$(this).parents('.wrap').css({ border: '3px solid #555555', padding: 10});
}
});
HTML
<div class="jqTest3">
<div class="wrap">
<div class="wrap">
<div class="wrap">
<p data-func="closest">closest()</p>
</div>
</div>
</div>
<hr />
<div class="wrap">
<div class="wrap">
<div class="wrap">
<p data-func="parents">parents()</p>
</div>
</div>
</div>
</div>
パフォーマンスはclosest()の方がよさそうですね。
投稿日 |
2012年2月 3日 13:57 |
カテゴリ |
JavaScript |
タグ |
jQuery | 動作確認 |
トラックバック URL |
http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1264 |
コメント