Attribute Contains Selector in to Array

Question

I'm trying to search the SRC of a set of images then return all that matched a string. I'm building on a e-commerce system that is very restrictive, there is no way of linking an image to its variant so thats why I have to search a list of all images then return the matched src's. (I'm also using a rack of IF statements this is so the customer can use the WYSIWYG and add new colours)

   jQuery(document).ready(function($) {
       $('#product-variants-option-0').change(function() {
         var select_value, keyword, new_src;


         select_value = $(this).find(':selected').val();

        if (select_value == "Kelly Green") { keyword = "kelly"; };
        if (select_value == "Navy") { keyword = "navy"; };
        if (select_value == "Gunmetal Heather") { keyword = "gunmetal"; };
        if (select_value == "Olive") { keyword = "olive"; };
        if (select_value == "Cocoa") { keyword = "cocoa"; };
        if (select_value == "Black") { keyword = "black"; };
        if (select_value == "Charcoal") { keyword = "charcoal"; };
        if (select_value == "Dark Teal") { keyword = "teal"; };
        if (select_value == "White") { keyword = "white"; };
        if (select_value == "Black") { keyword = "black"; };
        if (select_value == "Garnet") { keyword = "garnet"; };
        if (select_value == "Charcoal Heather") { keyword = "charcoal-heather"; };


         // Find the image using that `src`, note that we concatenate the value
         // from `keyword`, rather than having it in a literal.
         var new_src = $('#preload img[src*=' + keyword + ']').attr('src');

         var large_src = new_src.replace('medium','large');

         // Set the image's source.
         $('div.image img').attr('src', large_src);
       });
    });

This works perfectly, for one image. But I need

var new_src = $('#preload img[src*=' + keyword + ']').attr('src'); 

as an array. then pass the first matched SRC to

$('div.image img').attr('src', large_src);

then all the rest to another div

$('div.thumbs img').attr('src', new_src);

Answer 1

In my answer to your previous question, I included a function attrAll that returns the array of src values. Then you just have to index into it.

Here's that function again:

// A utility function from my arsenal; you can
// just inline this if you don't want it.
// Returns an array containing the given attribute
// from *all* of the elements in the jQuery object.
// Args:
//  name        Name of the attribute to fetch
//  blanksOkay  (Optional, default false) true if
//              you want blanks in the array for
//              blank entries or non-existant entries;
//              false if you want them left out.
$.fn.attrAll = function(name, blanksOkay) {
  var list, index;

  if (typeof blanksOkay === "undefined") {
    blanksOkay = false;
  }

  list = [];
  for (index = 0; index < this.length; ++index) {
    entry = $(this[index]).attr(name);
    if (entry || blanksOkay) {
      list.push(entry);
    }
  }
  return list;
};

Usage:

var srcArray = $('#preload img[src*=' + keyword + ']').attrAll('src');

Passing "...the first matched SRC":

$('div.image img').attr('src', srcArray[0]);

I'm not sure what you mean by "...then all the rest to another div", but it's an array, you can get the values from it in the usual way and use them to add img tags to a div or whatever.

Perhaps you meant that you want all of the other images to be img tags in the div.thumbs. If so, another general purpose function from that answer may be useful:

// Join the entries in the array with the given
// prefix and suffix.
function joinEntries(a, prefix, suffix) {
  prefix = prefix || '';
  suffix = suffix || '';
  return prefix + a.join(suffix + prefix) + suffix;
}

...because then you can do this:

$('div.thumbs').html(joinEntries(srcArray.slice(1), "<img src='", "'>"));

...which replaces the thumbs with img tags for all of the remaining entries in the array.

Answer 2

$('#preload img[src*=' + keyword + ']').each( function(index) {
    if (index == 0) { $('div.image img').attr('src', $(this).attr('src') ) }
    if (index == 1) { $('div.thumbs img').attr('src', $(this).attr('src') ) }
} ); 

Not clear what you want done with any after the first two...

Answer 3

$('#preload img[src*=' + keyword + ']').each(function(){
    var large_src = $(this).attr('src').replace('medium','large');
    // Set the image's source.
    $(this).attr('src', large_src);
});