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 ?

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 ?

• javascript
• jquery

• How about showing us a snippet of the generated HTML instead of the PHP? – j08691 Commented May 9, 2014 at 12:56
• Just do $bla = $bla; once before the while($bla = $bla) loop, and the first li will not even show up. No need for jQuery here. – Bergi Commented May 9, 2014 at 12:57
• No need for each loops at all. Any answer that uses each for this simple problem should be cut into small pieces and recycled! Resist the urge to write bloated & slower code using each! :) Alternative answer added below. – iCollect.it Ltd Commented May 12, 2014 at 13:55

5 Answers 5

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 e handy at some future development stage).

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

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

e.g.

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

JSFiddle: http://jsfiddle/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".

you can remove like this:

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

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

});

Fiddle DEMO

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

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

or

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

You can try this:

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