Question

 $.each($('.box'), function () {
     var heightOfBox = $(this).height();
     console.log(heightOfStory);
     $.each($('.line'), function () {
         $(this).css('height', heightOfBox + 'px');
     });
 });

我有一组具有不同高度的元素，我想将它设置为另一组。上面的代码失败了，因为它获得了最后一个元素的高度，而不是每个元素的高度。

http://jsfiddle.net/vmxrca1d/1/

Answer 1

$.each($('.box'), function (i, val) {
     var heightOfBox = $(this).height();
     $(".line").eq(i).css('height', heightOfBox + 'px');

 });

.box {
    background:red;
    width:10px;
    margin:10px;
}
.line {
    background:blue;
    width:10px;
    margin:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" style="height:10px;">1</div>
<div class="box" style="height:22px;">1</div>
<div class="box" style="height:40px;">1</div>
<div class="line">1</div>
<div class="line">1</div>
<div class="line">1</div>

使用 eq（）

 $.each($('.box'), function (i, val) {
     $(".line").eq(i).css('height', $(this).height() + 'px');

 });

Answer 2

使用eq和index设置相应元素的高度;

// Iterate over each of the element having box as class
$('.box').each(function (i, val) {
    $('.line').eq(i).height($(this).height());
    // Get the index of this element
    // Set the height of the corresponding element to the current element height
});

Demo

Answer 3

试试这个..

$.each($('.box'), function (i,d) {
  var heightOfBox = $(d).height();
  console.log(heightOfBox);
$('.line:eq('+ i +')').css('height', heightOfBox + 'px');
});

Working Fiddle Here

获取高度并适用于每个元素失败？

3 个答案: