javascript - 更改数组项的子元素(语法)

Question

我有几个使用相同类的 div。 在 div 中还有另外三个具有相同类的 div。

<div class="plane">
    <div class="win1">Lorem ipsum</div>
    <div class="win2">Dolor sit</div>
    <div class="win3">amet.</div>
</div>

<div class="plane">
    <div class="win1">Lorem ipsum</div>
    <div class="win2">Dolor sit</div>
    <div class="win3">amet.</div>
</div>

var allPlanes = $('.plane');


for (var i = 0; i < allPlanes.length; i++) {

    var onePlane = allPlanes[i];
    var baseHeight = 10;

    $(onePlane + " .win1").css("height", parseInt(baseHeight*1));        
    $(onePlane + " .win2").css("height", parseInt(baseHeight*2));
    $(onePlane + " .win3").css("height", parseInt(baseHeight*3));   

}

(不要介意名字。这只是一个例子......)

现在我用外部 div 创建了一个数组，我可以选择内部的单个 div。但是我没有得到内部子 div 的正确语法。 谁能帮忙？

我的 fiddle :http://jsfiddle.net/SchweizerSchoggi/559xvww6/

Answer 1

将脚本更改为:

var allPlanes = $('.plane');

var baseHeight = 10;
$(".plane > .win1").css("height", parseInt(baseHeight*1)+"px");        
$(".plane > .win2").css("height", parseInt(baseHeight*2)+"px");  
$(".plane > .win3").css("height", parseInt(baseHeight*3)+"px");

在这种情况下您不需要 for 循环。

更漂亮的方式:

var baseHeight = 10;

for (var i = 1; i <= 3; i++) {
     $(".plane > .win"+i).css("height", parseInt(baseHeight*i)+"px");          
}

http://jsfiddle.net/559xvww6/3/

如果您不想使用 for 循环并希望从数组进行动态配置:

var baseHeight = 10;
$.map([1,2,3], function(i) {
   $(".plane > .win"+i).css("height", parseInt(baseHeight*i)+"px");
}); 

http://jsfiddle.net/559xvww6/10/

编辑::附带说明:所有这些方法都是有效的，但这并不意味着它们是最好/最有效的方法。随意使用您最喜欢的那个，了解它并尝试使用它或根据您的个人情况调整它。 “最简单”的方法肯定是第一种，但也是最长的一种。