javascript - 一連の要素に適切な属性を追加する方法は?

Question

私はこのビットのコードを持っています:

if ($('.page-template-default .gallery img').attr('alt') !== undefined) {
   $('.page-template-default .gallery li').append("<small>" + $('.page .gallery img').attr('alt') + "</small>");
}

基本的に、画像自体の隣に画像の代替テキストを追加します。

問題は、10 個の画像を含むページがあり、追加された代替テキストが最初の画像から取得されたものと常に同じであることです。

各代替テキストをそれぞれの画像に戻す方法はありますか?

Answer 1

最も簡単な方法のようです：

$('.page-template-default .gallery img').attr('alt', function (i, alt) {
    if (typeof alt != 'undefined' && alt!='') {
        $(this).closest('li').append(alt);
    }
});

jsFiddle デモ

ちょっとした説明のために：

1. .attr()関数の 2 番目のパラメーターとして使用できます。alt通常は、関数の戻り値を使用して属性 (今回は ) を設定するために使用されます。この例では、何も返さず、alt指定した画像の属性をループするだけです。

2. thisここimgでは、現在使用されている を参照します

3. .closest()selector に一致するイメージの最も近い親を返し'li'ます。

Answer 2

imgこのようにそれぞれのプロパティを使用したい場合は、それぞれを反復処理する必要があります。

var $imgs = $('.page-template-default .gallery li > a > img');
$imgs.each(function() {
   var $img = $(this);
   if ($img.attr('alt') !== undefined) {
      var $li = $img.parent().parent();
      $li.append("<small>" + $img.attr('alt') + "</small>");
   }
});

Answer 3

$('.page-template-default .gallery img').each(function(i,it) {

  if ($(this).attr('alt') !== undefined) {

     var li = $('.page-template-default .gallery li').get(i);
     $( li ).append("<small>" + $(this).attr('alt') + "</small>");
  }

});

Answer 4

var $imgs = $('.page-template-default .gallery img');
$imgs.each(function($img) {
   if ($img.attr('alt') !== undefined) {
      $img.after("<small>" + $img.attr('alt') + "</small>");
   }
});