• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1000
  • Last Modified:

jquery to count UL or OL and <li> to create custome numbering order system

I am creating a OL or UL list and I need a custom jquery system that will count the elemetns and number them in a specific fasion.
0
brad0525
Asked:
brad0525
  • 9
  • 8
1 Solution
 
SRigneyCommented:
counting them is easy
$('ol li').size();

I think you need to post most specific information before we can give you the right answer.
0
 
brad0525Author Commented:
Ok,

I am creating a list such as

<ul>
<li>Option 1 <ul><li>Sub 1<ul><li>Sub-Sub1</li></ul></li></ul></li>
<li>Option 2 <ul><li>Sub 2<ul> <li>Sub-Sub2</li> <li>Sub-Sub3</li></ul></li></ul></li>
</ul>

so that should look like
1 Option 1
 1.1 Sub 1
1.1.1 Sub-Sub1

2 Option 2
2.1 Sub2
2.1.1 Sub-Sub2
2.1.2 Sub-Sub3

And so on...I tried to use CSS to do it, but you cant user a counter function in CSS with older browsers so I would like to use jquery..Any ideas?
0
 
SRigneyCommented:
I wrote this little script that looks like it will do what you want.  
<script>
	var levels={};
	$('li').each(function() { 
			var depth = $(this).parents('ul').size();
			if( !levels[depth] ){
				levels[depth] = 1;
			} else {
				levels[depth] = eval(levels[depth] + 1);
			}
			var insertVal = levels[depth];
			for( var i=depth-1; i>0; i--) {
				if( levels[i] ) {
					insertVal = levels[i] + "." + insertVal
				}
			}
			$(this).prepend('<span>' + insertVal + '&nbsp</span>');
	});
</script>

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
SRigneyCommented:
I recommend adding a class to the top level ol or ul and building it based on that so that not every list gets decorated this way.
0
 
brad0525Author Commented:
Can you please give me an example of how this should work?
0
 
brad0525Author Commented:
Sorry I didn't see the code on the phone..
0
 
SRigneyCommented:
not a problem.  Let me know how it works for you.
0
 
brad0525Author Commented:
just tested this and we need it to have the numbering systems like I described above. currently it is displaying different types of bullets but it is not displaying the numbering system...
0
 
SRigneyCommented:
I tested this code before posting and has a list showing the number system.

It may need tweaked for your page.  If you are using an ordered list instead of an unordered list you'll need to change from 'ul' to 'ol' in the script.

And you'll need to use css to remove the bullets.  This does not use bullets, it injects the numbers into the page inside of a span.  If you want you can include a class on that span so you can include css for how it displays.
0
 
brad0525Author Commented:
Here is our code for our test page..Please let me know if we need to change anything on it to make it work...Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Listing 7. Nested counters</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script>
	var levels={};
	$('li').each(function() { 
			var depth = $(this).parents('ul').size();
			if( !levels[depth] ){
				levels[depth] = 1;
			} else {
				levels[depth] = eval(levels[depth] + 1);
			}
			var insertVal = levels[depth];
			for( var i=depth-1; i>0; i--) {
				if( levels[i] ) {
					insertVal = levels[i] + "." + insertVal
				}
			}
			$(this).prepend('<span>' + insertVal + '&nbsp</span>');
	});
</script>


</head>
 
<body>
 
<ul>
  <li>item</li>
  <li>item
    <ul>
	  <li>item</li>
	  <li>item</li>
	  <li>item
	    <ul>
		  <li>item1</li>
		  <li>item1</li>
		</ul>
	  </li>
	</ul>
  </li>


</ul>


 
</body>
</html>

Open in new window

0
 
SRigneyCommented:
you need to include jquery and move the script to the bottom of the page or wrap it in
$(document).ready(function() {(
// the code from above in here.
);


or
$(
// the code from above in here.
);

Both of those work the same for running after the document finishes loading on the page.
0
 
SRigneyCommented:
Here is an updated version of your sample.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Listing 7. Nested counters</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>

<script>
$(document).ready(function() {
	var levels={};
	$('li').each(function() { 
			var depth = $(this).parents('ul').size();
			if( !levels[depth] ){
				levels[depth] = 1;
			} else {
				levels[depth] = eval(levels[depth] + 1);
			}
			var insertVal = levels[depth];
			for( var i=depth-1; i>0; i--) {
				if( levels[i] ) {
					insertVal = levels[i] + "." + insertVal
				}
			}
			$(this).prepend('<span>' + insertVal + '&nbsp</span>');
	});
});
</script>

</head>
 
<body>
 
<ul>
  <li>item</li>
  <li>item
    <ul>
	  <li>item</li>
	  <li>item</li>
	  <li>item
	    <ul>
		  <li>item1</li>
		  <li>item1</li>
		</ul>
	  </li>
	</ul>
  </li>


</ul>
</body>
</html>

Open in new window

0
 
brad0525Author Commented:
Thanks, worked perfectly... Just one more quick questions, if I create an input box dynamically in a
  • what would I have to do to make the script run again to add it to the numbering system..thanks
  • 0
     
    SRigneyCommented:
    You'd want to modify it to remove the numbering and add it back in.   Wrap the numbering in it's own function and wherever you dynamically add the input, you can call the addNumbering method again.
    $(document).ready(function() {
    		addNumbering();
    	});	
    });
    
    function addNumbering() {
    	var levels={};
    	// remove previous numbering
    	$('.numbering').remove();
    	
    	$('li').each(function() { 
    			var depth = $(this).parents('ul').size();
    			if( !levels[depth] ){
    				levels[depth] = 1;
    			} else {
    				levels[depth] = eval(levels[depth] + 1);
    			}
    			var insertVal = levels[depth];
    			for( var i=depth-1; i>0; i--) {
    				if( levels[i] ) {
    					insertVal = levels[i] + "." + insertVal
    				}
    			}
    			$(this).prepend('<span class="numbering">' + insertVal + '&nbsp</span>');
    }
    

    Open in new window

    0
     
    brad0525Author Commented:
    Ok I am kind of confused. The code I have below is currently creating the <li>'s . It is also creating a number and displaying it, we do not want the number it is creating, we only want the number in the script you designed above.

    So basically when we run the script below we want the items to be created dynamically and have the numbering system as you  designed above, I am not sure how to integrate the two..thanks
    <script type="text/javascript">
    function expandCollapse(obj)
    {
    hlink = obj.innerHTML;
    obj = obj.parentNode;
    
    if(obj.childNodes.length <= 1) {
    
    var list = document.createElement("OL");
         obj.appendChild(list);
         var li = document.createElement("LI");
         list.appendChild(li);
         li.innerHTML = '<a href="#" onclick="expandCollapse(this);">item 1</a>';
         var li2 = document.createElement("LI");
         li2.innerHTML = '<a href="#" onclick="expandCollapse(this);">item 2</a>';
         list.appendChild(li2);
    
    } else {
    obj.innerHTML = "<a href='#' onclick='expandCollapse(this);'>"+hlink+"</a>";
    }
    }
    </script>
    

    Open in new window

    0
     
    SRigneyCommented:
    That's adding a number because it's an OL, change the OL to a UL and include this with your CSS

    ul { list-style-type: none; }


    You can see how else to modify lists at http://css.maxdesign.com.au/listutorial/
    0
     
    brad0525Author Commented:
    OK i am just not sure how to combine the two scripts so when I run the function that adds the new li, it will also run the function that you created above to number it.
    0

    Featured Post

    Industry Leaders: We Want Your Opinion!

    We value your feedback.

    Take our survey and automatically be enter to win anyone of the following:
    Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

    • 9
    • 8
    Tackle projects and never again get stuck behind a technical roadblock.
    Join Now