Question

Basic idea of what im after..

On document ready copy classes from “#box-one” into “#box-three” if “#box-two img” has the same image name as “#box-one img”

and if possible.. with the possibility of excluding specific classes from transferring

html:

<span id="box-one" class="first second third">
   <img src="imagefolder/image1.jpg" alt />
</span>

<span id="box-two">
   <img src="imagefolder2/image1.jpg" alt />
</span>

<span id="box-three"></span>

Keeping in mind that the images inside “#box-one” and “#box-two” change but are always identical.

I have no idea how to do this as far as the js goes.. How could this be done?

Answer 1

$(document).ready(function(){

    var classesToIgnore = ["second"];

    if($("#box-one > img").attr("src").split('/').pop() == $("#box-two > img").attr("src").split('/').pop()) {
       //Get all classes into an array
       var classes = $("#box-one").attr("class").split(" ");
       //Grep out the classes you dont want and join it into a string seperated by space
       classes = $.grep(classes, function(class, index){
           return ($.inArray(class, classesToIgnore));
       }).join(" ");
       //Overwrite #box-three's classes. If you want to append them, loop over the array and use $("#box-three").addClass("className");
       $("#box-three").attr("class", classes);
    }

});

Working example: http://jsfiddle.net/raPBy/