Удалить элемент списка с помощью JQuery

-2

У меня есть div, который содержит неупорядоченный список. В списке может быть любое количество элементов списка.Удалить элемент списка с помощью JQuery

Высота дивана 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. Он скроет все, что превысит высоту и ширину 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")); 
}

EDIT:

Убедитесь, что переполнение в списке устанавливается в авто в противном случае она не может сообщите правильную высоту.

например. в CSS:

ul { 
    overflow:auto; 
}

источник

2013-06-20 12:03:25 Rob

спасибо. Я попробую – senthil

Не беспокойтесь, проверьте редактирование, или вы можете столкнуться с раздорами. – Rob

@ user2504994 Это лучшее решение, если вы действительно хотите удалить LI (иначе используйте переполнение: скрыто) Но код должен быть: '$ (" 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; 
    } 
});

Demo: 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

ответ

Смежные вопросы