获得高度并应用于每个元素失败？

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

演示版

Answer 3

尝试这个..

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

在这里工作小提琴