Javascript-ダイナミック変数ループ

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

をitem-で始まるクラスを持つすべての要素を取得するために$('[class^="item-"]')を使用して、ループができ

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

ああ少年、これらの問題のうちの1つを。これは、（未テスト）を助ける必要があります：あなたはそれらの上

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

あなたはこのような関数を作ることができます必要なときにいつでも使用してください。

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