リンク内のテキストを取得するときに、画像の場合はaltを取得するようにする

JavaScriptを使ってページ内の全てのリンクにイベントトラッキングを設定する機会があったのですが、labelにリンク内のテキストを指定しようとしたときにリンク内が画像の場合もあったので、たいした処理ではないですが実装方法をメモしておきます。

サンプルコード

HTML

<p><a href="">リンク内テキスト</a></p>
<p><a href=""><img src="./img.jpg" alt="画像のalt" width="120" height="90" /></a></p>

JavaScript

$(function() {
	$('a').on('click', function(e) {
		var thisText = $(this).text();
		console.log(thisText);

		e.preventDefault();
	});
});

テキストリンクは取得できていますが、画像リンクの場合は空文字が返ってきます。
対応前のデモページ
　

取得したテキストが空文字で、リンクの子孫要素にimgがある場合に、その画像のaltを使用するようにしました。

JavaScript

$(function() {
	$('a').on('click', function(e) {
		var thisText = $(this).text();
		// リンク内のテキストが取得できている場合
		if(thisText !== '') {
			console.log(thisText);
		// リンク内に画像が含まれている場合はaltを使用する
		} else if($(this).find('img').length) {
			thisText = $(this).find('img').attr('alt');
			console.log(thisText);
		}

		e.preventDefault();
	});
});

画像が複数入っている場合、先頭の画像のaltが使用されます。
対応後のデモページ