Solved

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

Posted on 2010-08-18
17
842 Views
Last Modified: 2012-05-10
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
Comment
Question by:brad0525
  • 9
  • 8
17 Comments
 
LVL 15

Expert Comment

by:SRigney
ID: 33467285
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
 

Author Comment

by:brad0525
ID: 33467343
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
 
LVL 15

Expert Comment

by:SRigney
ID: 33467786
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
 
LVL 15

Expert Comment

by:SRigney
ID: 33467798
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
 

Author Comment

by:brad0525
ID: 33467806
Can you please give me an example of how this should work?
0
 

Author Comment

by:brad0525
ID: 33467815
Sorry I didn't see the code on the phone..
0
 
LVL 15

Expert Comment

by:SRigney
ID: 33467875
not a problem.  Let me know how it works for you.
0
 

Author Comment

by:brad0525
ID: 33468128
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 15

Expert Comment

by:SRigney
ID: 33468159
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
 

Author Comment

by:brad0525
ID: 33468195
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
 
LVL 15

Accepted Solution

by:
SRigney earned 500 total points
ID: 33468244
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
 
LVL 15

Expert Comment

by:SRigney
ID: 33468313
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
 

Author Closing Comment

by:brad0525
ID: 33468802
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
     
    LVL 15

    Expert Comment

    by:SRigney
    ID: 33468873
    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
     

    Author Comment

    by:brad0525
    ID: 33468920
    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
     
    LVL 15

    Expert Comment

    by:SRigney
    ID: 33469067
    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
     

    Author Comment

    by:brad0525
    ID: 33469145
    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

    What Security Threats Are You Missing?

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Join & Write a Comment

    There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
    Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    747 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now