consecutive <li> classes

Question

I have trouble finding an expression to automatically generate a new 'class' like the following:

<ul>
<li class="img1">link</li>
<li class="img2">link</li>
<li class="img3">link etc...</li>
</ul>

This is nested in 2 tabs for 'most read' / 'latest comments'. The different classes are so that I can make a different bullet (number) using css

I'd appreciate any potential solutions...

Looks like this is the solution to my question: http://www.webdesignerwall.com/tutorials/jquery-sequential-list/ Thanks for those that helped...

Answer 1

You would want to either generate the classes server-side, or using javascript if you want them to change at runtime.

Answer 2

If it's numbered would you not use an ordered list? <ol>.

Or maybe I'm missing a point here. Are you using a higher level language to create this html? or tool?

Answer 3

Sorry for 'bumping' this back into view :o)

The detail I didn't add before:

<li> classes are to give a stylised rather than ordinary (bullet) number

I expect I need a js script to generate img1, img2, img3 - 6 classes and will use together with the wordpress calls for latest comments and an rss newsfeed.

I thought it should be simple stuff to find, but sofar zilch of wordpress forums, google etc., and I have no js programming background

Thanks for a second look Bill

Answer 4

From what I understand, you want to print out an unordered list with each list item having a unique class that increases by 1 each time a list item is printed?

I don't have any exprience with Wordpress, but could this not be easily done with a variable that you increase each time a list item is printed?

For example:

<ul>
  <li class="<?php echo "img","$i"; ?>>link</li><?php $i++; ?>
  <li class="<?php echo "img","$i"; ?>>link</li><?php $i++; ?>
  <li class="<?php echo "img","$i"; ?>>link etc...</li><?php $i++; ?>
</ul>

Alternatively, you could create a function that does the following: 1) Print out the number 2) Increase the value of the number by one so that the next time the function is called it prints out a higher value

This would then allow you to do the following:

function classImg() {
  echo "img", "$i";
  $i++;
}

<ul>
  <li class="<?php classImg(); ?>>link</li>
  <li class="<?php classImg(); ?>>link</li>
  <li class="<?php classImg(); ?>>link etc...</li>
</ul>

I have written this off the top of my head and so there are probably errors but I hope you understand what I am getting at.

Answer 5

This code will generate the incremental classes:

<?
class linkClass
{
        public static $n;
        public function next()
        {
                return self::$n++;
        }
}
?>

<? linkClass::$n = 1; ?>
<ul>
  <li class="link<? print(linkClass::next());?>">link</li>
  <li class="link<? print(linkClass::next());?>">link</li>
  <li class="link<? print(linkClass::next());?>">link</li>
</ul>

You would put the "print(linkClass::next());" in the line generating the links such as(not a real example):

foreach($links as $link)
  echo '<li class='.linkClass::next().'>'.$link.'</li>';

Answer 6

Using jQuery:

$(function(){
  $('ul.special').each(function() {
    $('li', this).each(function(i) { this.addClass('img'+i.toString()); });
  });
});

This is written off the top of my head with the barest reference. I suggest you check out jQuery for more information, etc.