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.

Pratik Parekh · Accepted Answer · 2016-09-29 11:27:29Z

3

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.

answered Sep 29, 2016 at 11:27

Pratik Parekh

4474 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Feathercrown Over a year ago

Hmm, nice solution.

user1702401 Over a year ago

You're missing var obj = $(objStr);

Pratik Parekh Over a year ago

NO , its only string

user1702401 Over a year ago

Uhh what? obj is undefined variable there.

Pratik Parekh Over a year ago

oh yes , right , I mean you taking about objStr , sorry

Jameson the dog · Accepted Answer · 2016-09-29 11:53:23Z

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});
 });

edited Sep 29, 2016 at 11:53

answered Sep 29, 2016 at 11:24

Jameson the dog

1,8061 gold badge12 silver badges13 bronze badges

2 Comments

Feathercrown Over a year ago

But what if another object had a class like "item-duplicator" or something else that starts with item?

Jameson the dog Over a year ago

in this case you might have a problem, if that element also has a .text object inside it. you could check the class with a regex or use a for loop - it depends on your markup

Feathercrown · Accepted Answer · 2016-09-29 11:26:43Z

1

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);
}

edited Sep 29, 2016 at 11:26

answered Sep 29, 2016 at 11:23

Feathercrown

2,5911 gold badge19 silver badges32 bronze badges

3 Comments

Feathercrown Over a year ago

@JaydipJ Fixed it! Thanks.

user1702401 Over a year ago

Absolutely no need for such complex variable handling

Feathercrown Over a year ago

@user1702401 So? This is the closest to his answer I could get with a for loop.

Tigger · Accepted Answer · 2016-09-29 11:35:25Z

1

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());
}

edited Sep 29, 2016 at 11:35

answered Sep 29, 2016 at 11:30

Tigger

9,1485 gold badges40 silver badges40 bronze badges

Comments

Igor Dymov · Accepted Answer · 2016-09-29 11:21:10Z

0

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
    });
}

answered Sep 29, 2016 at 11:21

Igor Dymov

16.5k5 gold badges52 silver badges56 bronze badges

Collectives™ on Stack Overflow

Javascript- Dynamic variable loop

5 Answers 5

5 Comments

2 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related