javascript - 使用 JQuery 删除列表项

Question

我有div一个包含无序列表的列表。列表可以有任意数量的列表项。

div 的高度是200px.

我想删除超过200px.

<div style="height:200px;">
<ul>
 <li>value1</li>
 <li>value2</li>
 <li>value3</li>
 <li>value4</li>
 <li>value5</li>
 <li>value6</li>
 ...
 ...
</ul>
</div>

Answer 1

http://jsfiddle.net/xabUj/3/

$(function () {
    if ($('ul').height() > 200) 
        for(var i = $('ul li').length;i>0;i--)
            if($('ul').height() > 200)
                $('ul li').eq(i).remove();
            else break;

});

Answer 2

你可以这样做：

while($("ul").height() > 200)
{
    $("ul").remove($("ul li:last-child"));
}

编辑：

确保列表中的溢出设置为自动，否则它可能不会报告正确的高度。

例如在 CSS 中：

ul {
   overflow:auto;
}

Answer 3

尝试这个：

http://jsfiddle.net/AjqU9/3/

 <div style="height: 200px;position:absolute;">
        <ul>
            <li id="Li1">value1</li>
            <li id="Li2">value1</li>
            <li id="Li3">value1</li>
            <li id="Li4">value1</li>
            <li id="Li5">value1</li>
            <li id="Li6">value1</li>
            <li id="Li7">value1</li>
            <li id="Li8">value1</li>
            <li id="Li9">value1</li>
            <li id="Li10">value1</li>
            <li id="Li11">value1</li>
            <li id="Li12">value1</li>
            <li id="Li13">value1</li>
            <li id="Li14">value1</li>
            <li id="Li15">value1</li>
            <li id="Li16">value1</li>
            <li id="Li17">value1</li>
            <li id="Li18">value1</li>
            <li id="Li19">value1</li>
            <li id="Li20">value1</li>
            <li id="Li21">value1</li>
            <li id="Li22">value1</li>
            <li id="Li23">value1</li>
            <li id="Li24">value1</li>
            <li id="Li25">value1</li>
            <li id="Li26">value1</li>
        </ul>
    </div>

<script type="text/javascript">
    $('div li').each(function () {
        var thi_li = $(this);

        if (thi_li.position().top >= 200)//li that after 200px heigth
        { thi_li.remove(); }
    })
</script>

Answer 4

var counter = 0;
$("ul li").each(function() {
    $this = $(this);
    counter += $this.height();
    if(counter > 200) $this.remove();
});

Answer 5

工作 jsFiddle 演示

只需添加overflow: hidden到您的div元素，它不会真正删除您的元素，但会隐藏它们。

<div style="height:200px; overflow: hidden;">

Answer 6

尝试

var $div = $('div'), $ul = $div.find('ul');

$.each($ul.find('li').get().reverse(), function(){
    if($ul.outerHeight(true) > $div.innerHeight()){
        $(this).remove();
    } else {
        return false;
    }
});

演示：小提琴