Add increment number to class?

**gwmbox** · 05-28-2010, 04:05 AM

Hi all

I asked for a sequential number before for a list, when in fact I need an increment method to add to a class. Sorry if this is regarded as a double post but I don't think my original request was correct.

so anyway...

If I have a list being generated by a javascript on the fly and I want to add a unique class reference to each list item how would I do that. I have the list being generated but cannot work out how to add a class reference to each item that is an increment for each list item called. I have been reading about javascript increment and that seems to be what I need but my results keep coming back with just the first item incremented and then each subsequent list item is the same number

I'm going to assume I need some form of loop or for each method so that as each list item is generated it looks at the javascript and gets the next number for that list. The result would end up with a list with classes like;

Code:

<ul id="mylist">
   <li class="someclass_1">Text</li>
   <li class="someclass_2">Text</li>
   <li class="someclass_3">Text</li>
   <li class="someclass_4">Text</li>
</ul>

It is the 1, 2, 3 and 4 I need to have added to the class, but that list numbers are different in number from time to time, so the list might have 6, 8, or even 10 items in it. The max would be 10 so if it would be easier to just insert via js then maybe that would be easier???

Thanks for your help

**vwphillips** · 05-28-2010, 08:49 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.someclass_1 {
  background-Color:red;
}

.someclass_2 {
  background-Color:green;
}

.someclass_3 {
  background-Color:blue;
}

.someclass_4 {
  background-Color:yellow;
}


/*]]>*/
</style></head>

<body>
<ul id="mylist">
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
</ul>
<script  type="text/javascript">
/*<![CDATA[*/
function Test(id,cls){
 var ul=document.getElementById(id);
 var lis=ul.getElementsByTagName('LI');
 for (var z0=0;z0<lis.length;z0++){
  lis[z0].className=cls+(z0+1);
 }
}

Test('mylist','someclass_');

/*]]>*/
</script></body>

</html>

**gwmbox** · 06-03-2010, 12:31 AM

Ok with my limited knowledge I have tried everything I can think of but cannot get it to work in the script I am using.

The script is a JoomlaWorks Tabs and Slides plugin, available from http://www.joomlaworks.gr/ (it is the in content items one - the plugin not the module). Unfortunately I have not been able to get assistance (or even a response) from JoomlaWorks.

I have attached one script that I think is what I think needs to be modified to get it to work. Basically I need a way to get each list item assigned a unique class. I have also attached the php file (as a txt file) which is used to display the results.

Happy to pay for modification of the script if required to get it to work the way I need, just need to know how much.

Cheers

Thread: Add increment number to class?

Thread Tools

Search Thread

Add increment number to class?

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions