?
Solved

jquery each loop

Posted on 2013-11-06
8
Medium Priority
?
278 Views
Last Modified: 2013-11-06
Hi,

Im trying to create a function that manipulates an unorderd list and creates nested unorders lists with 10 list items in each.

My functyion so far looks like:
$(".resources ul.book li").each(function(i, val) {
    
    if(i%10==0) {
      //$(this).append("<ul>");
      var newlist = $("<ul>").insertAfter($(this));
    }
    if(newlist) {
      newlist.append($(this));
    }
   i++;
});

Open in new window


newlist variable gets lost on each iteration - any ideas why?

Thanks
0
Comment
Question by:coolispaul
  • 3
  • 3
  • 2
8 Comments
 
LVL 14

Assisted Solution

by:quizwedge
quizwedge earned 1000 total points
ID: 39627157
If you want to keep newlist, you have to declare it outside of the each function. Try the following:

var newlist = '';
$(".resources ul.book li").each(function(i, val) {
    
    if(i%10==0) {
      //$(this).append("<ul>");
      newlist = $("<ul>").insertAfter($(this));
    }
    if(newlist) {
      newlist.append($(this));
    }
   i++;
});

Open in new window

0
 

Author Comment

by:coolispaul
ID: 39627173
yes that works

so variable scope is lost with the each() function because the function is effectively exited and entered again each time?

Thanks
0
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 39627185
You don't need the i++ - it automatically gets incremented with the each() call
0
Technology Partners: 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!

 
LVL 14

Expert Comment

by:quizwedge
ID: 39627186
Yep. FWIW, the value of "this" changes in the each loop as well. If you ever want to access "this" inside the each loop you have to do var saved_this = this outside of the loop.
0
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 39627210
'this' inside the each loop is the LI that you're on. You wouldn't have access to it outside the loop in the first place!

'this' outside the loop would refer to something else.
0
 

Author Comment

by:coolispaul
ID: 39627358
thanks chris - yeah i was getting confused

By the way , mu function is now
var newlist = '';
$(".resources ul.book li").each(function(i) {
    
    if(i%10==0) {
   
      newlist = $("<li><ul>").insertAfter($(this));
    }
    
      newlist.append($(this));
   
});

Open in new window


but this produces:

<ul class="book">
            <li><ul></ul>
           <li><a href="">one</a></li>
          <li><a href="">two</a></li>
</ul>

why is the ul in bold closed? i need the li to be inside the ul

Thanks
0
 
LVL 45

Accepted Solution

by:
Chris Stanyon earned 1000 total points
ID: 39627399
When you create an element in jQuey like this:

$('<ul>')

it creates the full element, which includes the opening and closing tags. You need something like this:

$('.resources ul.book li').each(function(i, li) {
	if(i%10==0) {
		//creat a new LI
		newLI = $("<li>").insertBefore($(this));
		//create a new UL and add it to the new LI
		newUL = $("<ul>").appendTo(newLI);
	}
	//add the LIs to the new UL
	newUL.append($(this));
});

Open in new window

0
 

Author Comment

by:coolispaul
ID: 39627406
perfect thanks and thanks fo explaining why
0

Featured Post

Independent Software Vendors: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses
Course of the Month14 days, 1 hour left to enroll

807 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