jquery nested each problem

admin

Administrator
Staff member
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:

Code:
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

Code:
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.