Solved

jquery each loop

Posted on 2013-11-06
8
268 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 250 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 42

Expert Comment

by:Chris Stanyon
ID: 39627185
You don't need the i++ - it automatically gets incremented with the each() call
0
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 42

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 42

Accepted Solution

by:
Chris Stanyon earned 250 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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

706 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

19 Experts available now in Live!

Get 1:1 Help Now