Solved

jquery each loop

Posted on 2013-11-06
8
270 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 43

Expert Comment

by:Chris Stanyon
ID: 39627185
You don't need the i++ - it automatically gets incremented with the each() call
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
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 43

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 43

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

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 JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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…

773 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