I have this xml document:
<?xml version="1.0" encoding="utf-8" ?>
<modules>
<sect>
<mod name="Weather">
<minWidth>200</minWidth>
<minHeight>200</minHeight>
</mod>
<mod name="Settings">
<minWidth>200</minWidth>
<minHeight>30</minHeight>
</mod>
</sect>
<sect>
<mod name="Social">
<minWidth>200</minWidth>
<minHeight>200</minHeight>
</mod>
</sect>
<sect>
<mod name="Show">
<minWidth>200</minWidth>
<minHeight>200</minHeight>
</mod>
<mod name="Puzzle">
<minWidth>200</minWidth>
<minHeight>200</minHeight>
</mod>
</sect>
</modules>
and I want to display every sect node with it's child nodes as list elements with jquery ajax. I tried the following js code:
$.ajax({
type: "GET",
url: "/style/modules/start_page_modules.xml",
dataType: "xml",
success: function(xml){
$(xml).find('sect').each(function(){
$("<div></div>").html(function(){
$(this).find("mod").each(function(){
var mWidth = $(this).children("mod").find("minWidth").text();
var mHeight = $(this).children("mod").find("minHeight").text();
$("<li></li>").css({
width: mWidth,
height: mHeight
}).appendTo("sect");
});
}).appendTo("#main_content ul");
});
},
error: function() {
alert("An error occurred while processing XML file.");
}
});
and all it does is to append the three sect nodes to the ul element and nothing else. I want the mod nodes to be in their respective divs like so:
<div id="sect">
<li style="width: 200px;height:200px;"></li>
<li style="width: 200px;height:30px;"></li>
</div>
<div id="sect">
<li style="width: 200px;height:200px;"></li>
</div> .....and so on
Please i need help...
each returns the current set, not the elements that have been generated in it's callback.You are trying to append the li elements to a non-list element which is an invalid markup.
$(xml).find('sect').each(function (i, sect) {
$("<ul class='sect'></ul>").html(function () {
// `this` here refers to the `ul` ^
return $(sect).find("mod").map(function () {
var $mod = $(this);
var mWidth = $mod.find("minWidth").text();
var mHeight = $mod.find("minHeight").text();
return $("<li></li>").css({
width: mWidth,
height: mHeight
}); // .text(this.getAttribute('name'));
}).get();
}).appendTo("#target");
});
The above snippet generates this structure:
<ul class="sect">
<li style="width: 200px; height: 200px;"></li>
<li style="width: 200px; height: 30px;"></li>
</ul>
...
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments