获取元素高度并将其分配给下一个元素

Question

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

例如

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

在：

elem1 = 100px
elem2 = 300px
elem3 = 150px

后：

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

它不起作用。请帮助我。感谢。

Answer 1

如果要更改高度，则需要在更改之前阅读它。所以这意味着你需要从最后开始并按照自己的方式开始。

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

Answer 2

试试这个： - http://jsfiddle.net/adiioo7/hW9ux/

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

<强> CSS： -

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

<强> HTML： -

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

Answer 3

非常简单..只是你反过来..

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

它将完美地工作.. !!试试吧

Answer 4

试试这个。

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

Jquery代码

var incr, i=0;
$('li').each(function(){
    var $this = $(this);
        incr = $this.height();
    if(i == 0){
        $this.next().height( $this.height());
        i++;
    } else {
        $this.next().height( $this.height()+incr);
    }
});

<强> CSS：

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

工作演示：http://jsfiddle.net/xMGJe/4/