CODEWITHSUNDEEP
javascriptjqueryhtmlfilter
Muhamed Ahmed
Muhamed Ahmed

Reputation: 142

jQuery add alt tag to images with same src

There are many images with same URL source but the first image only that has the Alt tag, so how can I add alt to the other image with the same source?

$(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>

Simply I need filter images to get

All images that have same source URL.

Copy the alt tag to other images that haven't alt but have same source URL

Upvotes: 1

Views: 1322

Answers (2)

Mike &#39;Pomax&#39; Kamermans
Mike &#39;Pomax&#39; Kamermans

Reputation: 53598

  1. get all unique src attributes,
  2. for each unique src attribute, get all images that use it
  3. for each set, find a member with alt and then assing that to the entire set.

In code:

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);
  })
});

Upvotes: 2

RickL
RickL

Reputation: 3393

The first version (with comments) assigns the value of only the first instance of alt to all images:

$(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);
        });
    }
});

and the second version assigns the alt value of the element to subsequent images (so alt="bbb" in your question is picked up and assigned to subsequent images):

$(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);
        }
    });
});

You can take your pick, depending on what your specific needs are.

Upvotes: 0

Related Questions