Jquery looping properties

Question

im paraphrasing my question: the code below works fine, every block different by only a number

$('.topCellNav_1').mouseover(function(){                    
      $('.cell_1').not(this).fadeTo(50,0.4);                
});

$('.topCellNav_2').mouseover(function(){                    
      $('.cell_2').not(this).fadeTo(50,0.4);                
});

$('.topCellNav_3').mouseover(function(){                    
      $('.cell_3').not(this).fadeTo(50,0.4);                
});

$('.topCellNav_4').mouseover(function(){                    
      $('.cell_4').not(this).fadeTo(50,0.4);                
});

$('.topCellNav_5').mouseover(function(){                    
      $('.cell_5').not(this).fadeTo(50,0.4);                
});

and so on up to 19 or more ......

so the question is --- how to shorten the code above using loop

something like that:

var i=-1
while ( ++i < 19 ) { 

$('.topCellNav_'+i).mouseover(function(){                   
      $('.cell_'+i).not(this).fadeTo(50,0.4);   

});
}

thanks

another solution is to add a common class like `topCellNav` to all those elements then `$('.topCellNav').mouseover(function () { $('.cell_' + this.className.match(/topCellNav_(\d+)/)[1]).not(this).fadeTo(50, 0.4); });` — Arun P Johny, Sep 22 '14 at 08:49

score 0 · Answer 1 · answered Sep 22 '14 at 08:42

0

You can use attribute starts with selector

$('[class^="topCellNav_"').mouseover(function() {
    var index = $(this).attr("class").split("_")[1];
    $('.cell_' + index).not(this).fadeTo(50, 0.4);
});

answered Sep 22 '14 at 08:42

Anoop Joshi P

25,373
8
32
53

thanks for replies ... i checked the answer suggested, however i do not print the values! i need to loop the properties... – VNicholson Sep 22 '14 at 09:59

Jquery looping properties

1 Answers1