Javascript-Dynamic variable loop

Question

Я пытаюсь уменьшить количество кода, которое я повторяю.

В настоящее время у меня ниже:

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

Я ищу, чтобы положить это в цикл, где переменное количество будет насчитывать до независимо от количества я нуждался, чтобы остановить.

Answer 1

Вы можете сделать функцию, как это и использовать всякий раз, когда вы хотите

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

Этот код не влияет ни на какой другой код.

Answer 2

Что-то, как это должно быть довольно acceptible в вашем случае, я думаю:

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

Answer 3

Ooh мальчик, одна из этих проблем. Это должно помочь (непроверенные):

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

Вы можете использовать $('[class^="item-"]'), чтобы получить все элементы, которые имеют класс, который начинается с item- и петля над ними

$('[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 5

Гадание эти строки:

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

Должно быть:

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

Вы могли бы сделать что-то вроде:

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

Или что-то менее гибким в функции:

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