Question

有许多图片具有相同的网址源，但第一张图片只有Alt标记，那么如何将alt添加到具有相同来源的其他图片？

$(function(){
    var srcs = [],
        alt = '',
        title = '',
        temp;
    $("img").filter(function(){
        temp = $(this).attr("src");
        alt = $(this).attr("alt");
        title += $(this).attr("title");

        if($.inArray(temp, srcs) < 0){
            srcs.push(temp);
            srcs.push(alt);
            srcs.push(title); 
            return false;
        }
        return true;
    }).attr('alt',alt);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="colourDots">
   <img alt="aaa" title="axxx" src="/out/pictures/generated/product/8/300_450_100/60028.bl.jpg"/><br>
   <img src="/out/pictures/generated/product/8/300_450_100/60028.bl.jpg"/><br>
   <img  alt="bbb" title="axxx" src="/out/pictures/generated/product/8/300_450_100/60028.bl.jpg"/><br>
   <img src="/out/pictures/generated/product/8/300_450_100/60028.sw.jpg"/><br>
   <img src="/out/pictures/generated/product/8/300_450_100/60028.bl.jpg"/><br>
   <img src="/out/pictures/generated/product/8/300_450_100/60028.bl.jpg"/><br>
   <img src="/out/pictures/generated/product/8/300_450_100/60028.bl.jpg"/><br>
</div>

我只需要过滤图像

所有具有相同源网址的图片。

将alt标记复制到其他没有alt但具有相同源URL的图像

Answer 1

获取所有独特的src属性，
为每个唯一的src属性，获取使用它的所有图像
为每个集合找到一个alt的成员，然后将其分配到整个集合。

在代码中：

const uniques = [];
const imgs = $('img');

imgs.each(function () {
  let src = this.src;
  if (uniques.indexOf(src) === -1) uniques.push(src);
});

uniques.forEach(src => {
  let srcd = imgs.filter("img[src='"+src+"']");
  let alt = srcd.filter('[alt]').first().attr('alt');

  srcd.each( function() {
    $(this).attr('alt',alt);
  })
});

Answer 2

第一个版本（带注释）仅将alt的第一个实例的值分配给所有图像：

$(function () {
    // Get value of first instance of 'alt' for images within elements of the given class
    var alt = $(".colourDots img[alt]").first().attr("alt");
    // If value of 'alt' is not null or undefined
    // (Note, use != and not !== for this test)
    if (alt != null) {
        // Iterate images within elements of class .colourDots
        $.each($(".colourDots img"), function () {
            // assign value of var alt to each image
            $(this).attr("alt", alt);
        });
    }
});

，第二个版本将元素的alt值分配给后续图像（因此，您的问题中的alt="bbb"将被选中并分配给后续图像）：

$(function () {
    // Define a holding variable
    var alt;
    // Iterate images
    $.each($(".colourDots img"), function () {
        // If element has 'alt', assign the value to var alt
        if ($(this).attr("alt") != null) {
            alt = $(this).attr("alt");
        }
        // otherwise assign the value of var alt to the image
        else {
            $(this).attr("alt", alt);
        }
    });
});

您可以根据自己的具体需求选择。

jQuery将alt标签添加到具有相同src的图像

2 个答案: