-3

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>
4

6 に答える 6

1 
var counter = 0;
$("ul li").each(function() {
    $this = $(this);
    counter += $this.height();
    if(counter > 200) $this.remove();
});
于 2013-06-20T12:10:51.637 に答える
1

動作中のjsFiddleデモ

要素に追加overflow: hiddenするだけdivで、要素が実際に削除されるわけではありませんが、非表示になります。

<div style="height:200px; overflow: hidden;">
于 2013-06-20T12:12:14.060 に答える
1

試す

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

デモ:フィドル

于 2013-06-20T12:17:01.330 に答える
1

これを試して：

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>
于 2013-06-20T12:25:44.720 に答える