【jQuery】imgタグのalt属性を取得する方法

jQueryを使ってHTML要素の属性を操作することは非常に簡単です。今回は、imgタグのalt属性の値を取得する方法について詳しく解説します。画像の代替テキストを取得することは、SEOやアクセシビリティの観点からも非常に重要です。具体的なコード例を見ながら、一緒に学んでいきましょう。

単一のimgタグからalt属性の値を取得する
複数のimgタグからalt属性の値を取得する
まとめ

単一のimgタグからalt属性の値を取得する

まずは、単一のimgタグからalt属性の値を取得する方法を見てみましょう。例えば、以下のようなHTMLがあるとします。

<img id="myImage" src="image.jpg" alt="This is an image">

このimgタグのalt属性の値を取得するためのjQueryコードは以下の通りです。

$(document).ready(function(){
    var altText = $('#myImage').attr('alt');
    console.log(altText);  // "This is an image"と表示されます
});

$(document).ready(function(){})は、ページが完全に読み込まれた後に実行される関数です。$(‘#myImage’).attr(‘alt’)は、IDがmyImageのimgタグのalt属性の値を取得します。

複数のimgタグからalt属性の値を取得する

次に、複数のimgタグからalt属性の値を取得する方法を見てみましょう。以下のようなHTMLがあるとします。

<img class="myImages" src="image1.jpg" alt="Image 1">
<img class="myImages" src="image2.jpg" alt="Image 2">
<img class="myImages" src="image3.jpg" alt="Image 3">

これらのimgタグのalt属性の値をすべて取得するためのjQueryコードは以下の通りです。

$(document).ready(function(){
    $('.myImages').each(function(){
        var altText = $(this).attr('alt');
        console.log(altText);  // 各画像のalt属性の値が順番に表示されます
    });
});

$(‘.myImages’).each(function(){})は、クラスがmyImagesのすべてのimgタグに対して繰り返し処理を行います。$(this).attr(‘alt’)は、現在のimgタグのalt属性の値を取得します。