删除jQuery中的ul的第一个li

Question

There is a loop whithin loop

<?php while ($data = mysql_fetch_array($some)) 
{?> 
  <div class="pro"> 

    <div class="right-block"> bla bla bla bla </div>

     <ul class="color">

      <?php while($bla = $bla)
       { ?>
          <li><?php echo $bla; ?></li>
       <?php } ?> 

     </ul>
   </div> 

 <?php } ?>

this loop show 152 products and each product have minimum 3 to 4 colors

now I want to remove first li of ul from each product

if i use like this $(".color li:first").css("display" , "none"); this hide just first li of first ul but i want to remove first li from each ul

I tried using next() and functions like .each . I've also created a function and called it in the first while loop just above the ul .

Nothing works.

Could you help me please ?

Answer 1

use css3 selectors:

$('ul > li:first-child').remove();

see this fiddle to see it work.

note that jquery's pseudo-selector :first projects a collection to its first item, while the css selector selects all nodes that are the first child of their respective parent (in fact css3 provides the generalisation of :nth-child(an+b) , where a and b are integers such that iterating n over non-negative integers produces the index of the target elements among all children. this is not needed for your current task but might come handy at some future development stage).

thanks to @Bergi for pointing out the suitability of this explanation.

Answer 2

you can remove like this:

$('div.pro').each(function(){

    $(this).find('ul.colors').find('li:first').remove();

});

Fiddle DEMO

Answer 3

You can match the first child of any/all jQuery searches by simply using the first-child selector (the clue is in the name) :)

eg

  $('ul.color li:first-child').remove();

JSFiddle: http://jsfiddle.net/TrueBlueAussie/yj69m/5/

This basically says: "find all ul elements with the class "color", then find any li descendants, but only match the li when it is a first child of its parent "

:first on the other hand says "whatever I matched before-hand, no matter how many matches just return the first element".

Answer 4

there are so many method like eq, nth-child selectors

$('.colors li').eq(0).remove();

or

$('.colors li:nth-child(1)').remove();

Answer 5

您可以尝试以下方法：

 $(".color").find("li:first").remove();