Javascript- Dynamic variable loop

Question

I'm trying to reduce the amount of code I repeat.

Currently I have the below:

    var item1H = $(".item-1").height();
    var item1W = $(".item-1").height();
    $(".item-1 .text").css('margin-left', -item1W/2);
    $(".item-1 .text").css('margin-bottom', -item1H/2);

    var item2H = $(".item-2").height();
    var item2W = $(".item-2").height();
    $(".item-2 .text").css('margin-left', -item2W/2);
    $(".item-2 .text").css('margin-bottom', -item2H/2);

I'm looking to put this into a for loop where the variable number would count up to whatever number I needed it to stop.

Answer 1

You can make function like this and use whenever you want

toSetMargin(".item-2")
toSetMargin(".item-2")

function toSetMargin(objStr){
  var widthTmp = $(objStr + ' .text').height();
  var heightTmp = $(objStr + ' .text').height();

   obj.css('margin-left', -widthTmp/2);
   obj.css('margin-bottom', -heightTmp/2)
}

This code not impact any other code.

Answer 2

You could use $('[class^="item-"]') to get all the elements that have a class that starts with item- , and the loop over them

$('[class^="item-"]').each(function(){
   var $elem = $(this);
   var item1H = $elem.height();
   var item1W = $elem.width();
   $elem.find('.text').css({'margin-left': -item1W/2,'margin-bottom':-item1H/2});
 });

Answer 3

Ooh boy, one of these problems. This should help (untested):

for(i=1;i<=STOPPING_NUMBER;i++){
     window["item"+i+"H"] = $(".item-"+i).height();
     window["item"+i+"W"] = $(".item-"+i).width(); //Was height, accident?
     $(".item-"+i+" .text").css('margin-left', 0-window["item"+i+"W"]/2); //Hope this works lol
     $(".item-"+i+" .text").css('margin-bottom', 0-window["item"+i+"H"]/2);
}

Answer 4

Guessing these lines:

var item1W = $(".item-1").height();
var item2W = $(".item-2").height();

Should have been:

var item1W = $(".item-1").width();
var item2W = $(".item-2").width();

You could do something like:

function setCSS(item,attr,val) {
    $(item +" .text").css(attr, (val * -1)/2);
} 

var i, max = 10;
for(i=1;i<=max;i++) {
    setCSS(".item-"+ i,"margin-left",$(".item-"+ i).width());
    setCSS(".item-"+ i,"margin-bottom",$(".item-"+ i).height());
}

Or something less flexible within the function:

function setCSS(item,w,h) {
    $(item +" .text").css("margin-left", (w * -1)/2);
    $(item +" .text").css("margin-bottom", (h * -1)/2);
} 

var i, max = 10;
for(i=1;i<=max;i++) {
    setCSS(".item-"+ i,$(".item-"+ i).width()),$(".item-"+ i).height());
}

Answer 5

Something like this should be pretty acceptible in your case, I guess:

for (var i = 1, len = someN; i < len; i++) {
    var $item = $('.item-' + i);
    $item.find('.text').css({
        'margin-left': -$item.width() / 2,
        'margin-bottom': -$item.height() / 2
    });
}