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获得正确的语法。有人可以帮忙吗？

我的小提琴：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循环并希望从阵列进行dinamically配置：

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

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

编辑::只是旁注：所有这些方法都是有效的，但这并不意味着它们是最好/最有效的方法。随意使用您最喜欢的，理解它并尝试使用它或根据您的个人情况进行调整。最简单的＆＃34;方法肯定是第一个，但它也是最长的方法。

Answer 2

不是这个更好：

＆＃13;

var base = 10;
$('.plane > div').css('height', function(){
    return base*($(this).index()+1)
});

＆＃13;

.plane { 
    background-color: #ccc; 
    border: solid 1px #cdcdcd; 
    margin-bottom: 15px; 
}

.plane > .win1 { background-color: #ddd; }
.plane > .win2 { background-color: #eee; }
.plane > .win3 { background-color: #fff; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

Answer 3

您不能在+对象和字符串之间使用jQuery运算符。

正确的方法是：

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

这些查询中的每一个都转换为：选择.winX对象jQuery内onePlane的所有元素。

Answer 4

我会在嵌套中使用所有相同的类名，然后只做$('.plane:eq(0) .win:eq(2)').html()

alert( $('.plane:eq(0) .win:eq(2)').html() );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="plane">
    <div class="win">Lorem ipsum</div>
    <div class="win">Dolor sit</div>
    <div class="win">amet.</div>
</div>

<div class="plane">
    <div class="win">Lorem ipsum</div>
    <div class="win">Dolor sit</div>
    <div class="win">amet.</div>
</div>

Answer 5

如果您的课程已修复，那么您可以使用此代码

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

Answer 6

您可以使用each类的plane循环。

$('.plane').each(function(){
    baseHeight = 10;
    $(this).find(".win1").css("height", parseInt(baseHeight*1));  
    $(this).find(".win2").css("height", parseInt(baseHeight*2));  
    $(this).find(".win3").css("height", parseInt(baseHeight*3));  
});

<强> Demo

更改数组项的子元素（语法）

6 个答案: