Question

I have some code like this, well here is the part that is most important and does not work as I want.

<div class="somediv" data-dummy="class11">some text</div>
<div class="somediv" data-dummy="class12">some flying saucers</div>
<div class="somediv" data-dummy="class13">some crazy jpg</div>


var AllFirstCssClasses = [ 'class11', 'class12', 'class13' ];
var AllSecondCssClasses = [ 'class21', 'class22', 'class23' ];

for (var index = 0; index < $('div.somediv').length; index++){
   var firstCssClass = $('div.somediv').eq(index).attr('data-dummy');
   var index2 = $.inArray(firstCssClass, AllFirstCssClasses);
   $('div.somediv').eq(index).addClass(firstCssClass + ' ' +  AllSecondCssClasses[index2] );
}

I’ve done a fiddle http://jsfiddle.net/FVVXx/11/ that works for this example, but this code is inside a function triggered on a certain time interval (it’s a slider) and it does not work as in this example here.

In my code, the result for the first div is always <div class="somediv class11 undefined"> where undefined should beAllSecondCssClasses[index2] -> class21

Thanks for your replies 🙂

Answer 1

This is how you should write the algorithm with JQuery. If you can explain what you are trying to do, I will be able to help more.

$(function(){
var AllFirstCssClasses = [ 'class11', 'class12', 'class13' ];
var AllSecondCssClasses = [ 'class21', 'class22', 'class23' ];

function getParallelClass( firstClass ){
    return  AllSecondCssClasses[$.inArray(firstClass, AllFirstCssClasses)];
}

$("div.somediv").each(function(index,item){
      var $myDummy = $(this).attr("data-dummy");
      $(this).addClass($myDummy).addClass(getParallelClass( $myDummy) );
});

});

Here is my JSFiddle