CODEWITHSUNDEEP
phpjqueryhtmlcss
jhunlio
jhunlio

Reputation: 2660

How to add a class to a <li> generated by PHP using jQuery?

I have number of <li> generated by PHP. I want every row to display only 4 <li> and the last <li> in that row to have a class of noMarginRight?

<ul>
  <li>sample</li>
  <li>sample</li>
  <li>sample</li>
  <li>sample here</li>

  <li>sample</li>
  <li>sample</li>
  <li>sample</li>
  <li>sample here</li>

  <li>sample</li>
  <li>sample</li>
  <li>sample</li>
  <li>sample here</li>
</ul>

Hope this makes sense.

Upvotes: 2

Views: 134

Answers (6)

Chris Spittles
Chris Spittles

Reputation: 15359

CSS Only Method

Just for completeness here is a pure CSS3 way of doing what you want to achieve:

ul
{
    -moz-column-count:4; /* Firefox */
    -webkit-column-count:4; /* Safari and Chrome */
    column-count:4;
    -moz-column-gap:30px; /* Firefox */
    -webkit-column-gap:30px; /* Safari and Chrome */
    column-gap:30px;
    list-style: none;
    margin: 0;
    padding: 0;
}
<ul>
  <li>sample</li>
  <li>sample</li>
  <li>sample</li>
  <li>sample here</li>

  <li>sample</li>
  <li>sample</li>
  <li>sample</li>
  <li>sample here</li>

  <li>sample</li>
  <li>sample</li>
  <li>sample</li>
  <li>sample here</li>
</ul>

Upvotes: 0

Girish
Girish

Reputation: 12127

You can manage from PHP code, please try this way

     <ul>
    <?php
    $result = array("ads", "sdsa", "fsdfs", "fsdfsfsdf", "ffsfsf");
    $i = 0;
    foreach ($result as $k => $v) {
        ?>
        <li <?php echo (++$i % 4 == 0) ? "class=\"noMarginRight\"" : "" ?>><?php echo $v; ?></li>
<?php } ?>
</ul>

Upvotes: 0

Dimag Kharab
Dimag Kharab

Reputation: 4519

Since you mentioned you using php for displaying the output, here is a way you can do with php, 

    $counter    = 0;   

    while ($line = mysql_fetch_object($result)) 
    { 

              if($counter %4 != 0) 
                {

                    echo "<li  class='noMarginRight'>";
                    echo "your output";
                    echo '</li>';

                }
                else
                {
                    echo "<li>";
                    echo "your output";
                    echo '</li>';
                }

   }

}

Upvotes: 0

Sunil Kr. Yadav
Sunil Kr. Yadav

Reputation: 283

You can apply same name attribute to the last li of each row and then use $("your li selector on the basis of name" ).addClass( "myClass yourClass" );

for eg: $( "li[name='last']" ).addClass( "noMarginRight" );

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157384

I got that what you are trying to do, you want every 4th li not to have margin-right, so no need to assign any class for that, you can achieve this using pure CSS, as you have tagged the question for CSS as well..

ul li:nth-child(4n) {
   margin-right: 0;
}

Demo (Used color property to show how selector works)

Demo 2 (margin equivalent demonstration)

Upvotes: 4

Arun P Johny
Arun P Johny

Reputation: 388406

You can use the :nth-child

$('ul li').filter(':nth-child(4n), :last-child').addClass('noMarginRight')

Demo: Fiddle

If you are sure that always the number if rows are multiple of 4 then

$('ul li:nth-child(4n)').addClass('noMarginRight')

Demo: Fiddle

Upvotes: 3

Related Questions