使用JQuery刪除列表項

-2

我有div，它包含一個無序列表。該列表可以具有任意數量的列表項目。使用JQuery刪除列表項

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

來源

2013-06-20 senthil

也許你可以使用溢出屬性。在div的style屬性中放置「overflow：hidden」。它會隱藏一切超過div高度和寬度的東西。 – Tamara

@Tamara：設置溢出屬性與刪除元素相同嗎？ –

建議：不要刪除添加滾動http://jsfiddle.net/xabUj/ – xyz

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; 

});

來源

2013-06-20 12:01:24

您確定這會刪除列表底部的元素嗎？ – Rob

我敢肯定沒有，我想我不明白這裏的問題 –

@roasted：我是否缺少任何東西http://jsfiddle.net/xabUj/1/？ – xyz

你可以做這樣的事情：

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

編輯：

確保你的清單上的溢出設置爲auto，否則它可能不報告正確的身高。

例如在CSS：

ul { 
    overflow:auto; 
}

來源

2013-06-20 12:03:25 Rob

謝謝。我會嘗試 – senthil

不用擔心，檢查編輯或者你可能會遇到爭執。 – Rob

@ user2504994這是最好的解決方案，如果你真的想刪除LI（否則使用overflow：hidden）但代碼應該是：'$（「ul li：last-child」）。remove（）;' –

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

來源

2013-06-20 12:10:51 Shaddow

Working jsFiddle Demo

只需添加overflow: hidden您div元素，它不會真正刪除你的元素，但它會隱藏起來。

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

來源

2013-06-20 12:12:14

remove！= hidden 。 – lifetimes

嘗試

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

演示：Fiddle

來源

2013-06-20 12:17:01

試試這個：

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-20 12:25:44

使用JQuery刪除列表項

回答

相關問題