.closest()の使い方

最近知ったのですが、jQueryの.closest()というメソッドがとても便利だったので使い方をメモしておきます。

サンプルコード1

.closest()は、対象要素から最も近い祖先要素(指定した要素)を選択します。

HTML

<ul id="sample" class="sample-class">
	<li><a href="https://cly7796.net/blog/">cly7796.net<span class="text">サイト制作に関するメモ書き</span></a></li>
	<li><a href="http://ad-bookmarks.tumblr.com/">AD-Bookmarks<span class="text">アニメ・ゲーム系で、見せ方が面白いと思ったサイトを中心にストックしています。</span></a></li>
</ul>

HTMLは以下サンプル全て同じです。

JavaScript

$(function() {
	$(document).on('click', '#sample a', function() {
		alert($(this).closest('#sample').attr('class'));
		return false;
	});
});

.closest()の使い方のデモページ1
対象(aタグ)の祖先要素から#sampleを取得して、classをアラートで表示させています。
　

サンプルコード2

JavaScript

$(function() {
	$(document).on('click', '#sample a', function() {
		alert($(this).closest('.text').text());
		return false;
	});
});

.closest()の使い方のデモページ2
対象(aタグ)の祖先要素から.textを取得して、テキストをアラートで表示させています。
.textは対象の子要素にはいますが、祖先要素にはいないのでアラートには何も表示されません。
　

サンプルコード3

JavaScript

$(function() {
	$(document).on('click', '#sample a', function(e) {
		alert($(e.target).closest('.text').text());
		return false;
	});
});

.closest()の使い方のデモページ3
対象(クリック位置)の近い要素から.textを取得して、テキストをアラートで表示させてるっぽいです。
今回の場合、対象の子要素にいる.textのテキストが表示されます。
　

サンプルコード4

JavaScript

$(function() {
	$(document).on('click', '#sample', function(e) {
		alert($(e.target).closest('a').attr('href'));
		return false;
	});
});

.closest()の使い方のデモページ4
対象(クリック位置)の近い要素からaタグを取得して、URLをアラートで表示させています。
各リンク上でクリックすると、それぞれのURLが取得できていると思います。
　

【参考サイト】

• closest([expr]) – jQuery 日本語リファレンス