jquery nested each problem

Question

See Edit Below. I am trying to get some jquery to work in a wordpress plugin I am building. (string 'jQuery' is used instead of the '$' idiom when using jquery in wordpress, fyi)

sample xml:

   <person>
        <Name>Some Name</Name>
        <location>
            <locationName>One Address</locationName>
        </location>
        <date>
            <startDate>01-01-09</startDate>
        </date>
    </person>

sample jquery:

jQuery(text).find("person").each(function(){
    jQuery("#active_list")
        .append(
            "<div id=\'Entry\'>"
            + jQuery(this).find("Name").text()
            + "<b> at </b>"
    ;

    jQuery(this)
        .find("location")
        .each(function(){
            jQuery("#active_list")
                .append(
                    jQuery(this).find("locationName").text()
                    + " <b> on </b>"
                )
            ;
        })
    ;

    jQuery("#active_list")
        .append(
            jQuery(this).find("date").find("startDate").text()
            + "</div>"
        )
    ;
});

and then the bad mark up produced:

<div id="Entry"> Some Name<b> at </b></div>One Address <b> on </b>01-01-09

as you can see it is inserting /divs right after it exits the second nested loop. I'm obviously doing something wrong but I don't know what. Any ideas?

EDIT: If put

jQuery("#active_list").append("<div id=\'ActivityEntry\'>");

on it's own line, it closes the div immediately afterwards. So I am guessing I need to built a div element with jquery and then pack it and then append my div element.

I knew I'd screw it up somewhere, that was just an oversight. The input xml is "well formed". — Dan.StackOverflow
– Dan.StackOverflow, Commented Jun 17, 2009 at 3:53
Yeah, you can use jQuery to create elements in this manner: $("<div>"). You can also immediately modify them as in: $("<div>").attr("id", "Entry").html(html); — cdmckay
– cdmckay, Commented Jun 17, 2009 at 16:06

cdmckay · Accepted Answer · 2009-06-17 04:31:58Z

3

A little tip for using jQuery with Wordpress: enclose it in a function. It'll allow you to use the familiar $ function and it'll prevent you from polluting the global namespace with variables.

For example, your code could be rewritten as:

(function($) {

    ... (code with $) ...

})(jQuery);

As for an answer to your question, nested eaches don't work in jQuery if you use the this variable. To fix your problem, try using the full style of each:

$(...).each(function(i, val1) { 

    $(...).each(function(j, val2) { ... }

});

And use val1 and val2 instead of this.

answered Jun 17, 2009 at 4:31

cdmckay

32.4k25 gold badges86 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dan.StackOverflow Over a year ago

I modified my code to what you suggested, with the same behavior. I think what poh said about jquery turning everything in to objects is accurate, so it found an unclosed div object and closed it for me.

cdmckay Over a year ago

Yeah, my bad, I didn't read the question carefully. The first piece of advice still applies though :)

WEFX · Accepted Answer · 2011-07-15 20:49:50Z

2

my suggestion to your problem

jQuery(text).find("person").each(function(){
   var html;
   html = jQuery(this).find("Name").text() + "<b> at </b>";

   jQuery(this).find("location").each(function(){
      html += jQuery(this).find("locationName").text() + " <b> on </b>";
   });

   html += jQuery(this).find("date").find("startDate").text();
   jQuery("#active_list").append("<div id=\'Entry\'>" + html + "</div>");
});

This should work. You try to fine tune it. The reason your script didn't work was because jquery converts every string into an object.

edited Jul 15, 2011 at 20:49

WEFX

8,6118 gold badges69 silver badges104 bronze badges

answered Jun 17, 2009 at 4:05

poh

3904 silver badges10 bronze badges

Collectives™ on Stack Overflow

jquery nested each problem

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related