Javascript 获取元素高度并将其指定给下一个元素

嗨，我想获取一个元素的当前高度，然后将高度分配给下一个元素，依此类推

比如说

<ul>
   <li class="elem1">Element here </li> 
   <li class="elem2">Element here </li>  
   <li class="elem3">Element here </li>
</ul>

之后：

elem1 = 100px (preserve it's height)
elem2 = 100px (will have the height from elem 1 which is 100px)
elem3 = 300px (will have the height of elem 2 which is 300px)

jquery代码：

$('ul li').each(function(index){
    var elem = $(this);
    elem.next().css('height', elem.height()+'px');
});

---

它不起作用了。请帮帮我。谢谢。

如果要更改高度，请在更改之前阅读。所以这意味着你需要从最后开始，一路走到最开始

var lis = $('ul li');
for(var i=lis.length-1;i>0;i--) {
    lis.eq(i).height( lis.eq(i-1).height() );
}

试试这个：- JS:-

$('ul li').each(function (index) {
    var elem = $(this);
    elem.next().attr('data-height', elem.height() + 'px');
});

$('ul li').each(function (index) {
    var elem = $(this);
    if (elem.data("height")) {
        elem.height(elem.data("height"));
        elem.removeData("height");
    }
});

.elem1 {
    height:100px;
}
.elem2 {
    height:200px;
}
.elem3 {
    height:300px;
}

<ul>
    <li class="elem1">Element here</li>
    <li class="elem2">Element here</li>
    <li class="elem3">Element here</li>
</ul>

CSS:-

$('ul li').each(function (index) {
    var elem = $(this);
    elem.next().attr('data-height', elem.height() + 'px');
});

$('ul li').each(function (index) {
    var elem = $(this);
    if (elem.data("height")) {
        elem.height(elem.data("height"));
        elem.removeData("height");
    }
});

.elem1 {
    height:100px;
}
.elem2 {
    height:200px;
}
.elem3 {
    height:300px;
}

<ul>
    <li class="elem1">Element here</li>
    <li class="elem2">Element here</li>
    <li class="elem3">Element here</li>
</ul>

HTML:-

$('ul li').each(function (index) {
    var elem = $(this);
    elem.next().attr('data-height', elem.height() + 'px');
});

$('ul li').each(function (index) {
    var elem = $(this);
    if (elem.data("height")) {
        elem.height(elem.data("height"));
        elem.removeData("height");
    }
});

.elem1 {
    height:100px;
}
.elem2 {
    height:200px;
}
.elem3 {
    height:300px;
}

<ul>
    <li class="elem1">Element here</li>
    <li class="elem2">Element here</li>
    <li class="elem3">Element here</li>
</ul>

这里的元素
这里的元素
这里的元素

这很简单。。只要你把它颠倒过来

$($("ul li").get().reverse()).each(function(index){
    var elem = $(this);
    elem.next().css('height', elem.height()+'px');
})

它会很好地工作！！试试这个

<ul>
   <li class="elem1">Element here </li> 
   <li class="elem2">Element here </li>  
   <li class="elem3">Element here </li>
</ul>

CSS:

.elem1 {height:100px;}
li {background-color:grey; width:100px;}

---

工作演示：

因为您在阅读之前正在更改高度。AKA您需要从最后一个循环到第一个。@epascarello如果您更改下一个元素的高度，并且在下一次迭代中它将不会反映它的旧值。它将使用新的赋值。你所写的一切都是正确的。。但唯一的问题是。。对于每个循环，将从elem1读取到elem3，但根据您的要求，每个循环的清除值应读取从elem3到elem1的元素，因此您需要使用reverse（）方法来反转集合。就是这样..你为什么不使用比这个更适合循环的reverse（）呢？？看看我的答案。。！！如果jquery已经提供了反向方法，那么我认为您不应该使用自己的for循环。。如果您有绩效意识@DeepakSharma jQuery没有提供反向方法。LOL您正在使用一个数组反向方法，并创建一个新的jQuery来抵消这一点。这不是jQuery的一部分。是的，同样的事情。。那么jquery意味着它在jquery范围内。。实际上，它的Javascript方法是..@DeepakSharma。这不是一回事。我为什么不做呢？因为它需要多个循环，这个答案很简单。还需要创建多个jQuery对象。谁在乎它是否被锁住。如果你真的想保持冷静，复制jQuery反向插件并使用它<代码>$（'ul li'）.reverse（）.each（…）当您有简单的方法时，我不认为有任何需要使用反向插件。。当你有了一个简单的内置方法，那么有什么必要使用其他插件并编写你自己的代码呢。？？我认为这只是浪费时间而已。。所以我建议。。你想用什么取决于你。。但当我使用buildin反向方法时，我永远不会喜欢或建议这样的for循环。