JQuery异步操作

我让Jquery在我的XML文件中循环：

 $(xml).find("category").each(function()
    {
        var title = $(this).find("title").text();
        var i = 0;
        console.log("j:" + j);
        if (j > 0) {
            fillNav("","",i,"final");
        }
        $(this).find('items > item').each(function() {
            var text = $(this).find("text").text();
            console.log("i:" + i);
            fillNav(title,text,i,"text");
            i++
        });

        j++;
    });

填充div的位置：

 function fillNav(title,text,i,final){
    console.log("i:" + i);

        if ((i == 0)&&(final != "final")){
            console.log("title:" + title + "div><p><ul>");
            $("#accordionSub").append("<h3>"  + title + "</h3><br /><div><p><ul>");
            //$("#output").append("<div><p><ul>");
        }
        if (final != "final"){
            console.log("<li" + "text:" + "/li>");
            $("#accordionSub").append("<li>"  + text + "</li>");
        }
        if ((i == 0) && (final == "final")){
        console.log("final:" + "/ul>/p>/div>");
        $("#accordionSub").append("</ul></p></div>");
        }
}

函数fillNav（标题、文本、i、最终版本）{
控制台日志（“i:+i”）；
如果（（i==0）和&（final！=“final”））{
控制台日志（“标题：“+title+”div>
”；
$（“#accordiosub”）。追加（“+title+”
”；
//$（“#输出”）。追加（“
”）；
}
如果（最终！=“最终”）{
控制台日志（“”）；
$（“#accordiosub”）。追加（“
”+text+“
”）；
}
如果（（i==0）和（&（final==final”））{
log（“final:“+”/ul>/p>/div>”；
$（“#accordiosub”）。追加（“
”）；
}
}

生成的html：

<h3>Accessories</h3><br><div><p></p><ul></ul></div><li>Adaptors,  Bushings,   and Pressure Snubbers</li><li>Cables and Accessories   for pH Instruments</li><p></p>

pH仪表用电缆和附件

为什么UL标签没有围绕LI标签？

更新：

    output += "<h3>"  + title + "</h3><br />";
        output += " <div><p><ul> " ;
        $(this).find('items > item').each(function() {
            var text = $(this).find("text").text();
            var slink = $(this).find("link").text();
            //console.log("i:" + i);
            output += "<li class='subLink' src='"+ slink +"'>"  + text + "</a></li>";
        });
        output += "</ul></p></div>";

output+=“”+title+“
”；
输出+=“
”；
$（this）.find（'items>item'）。每个（函数（）{
var text=$（this.find（“text”）.text（）；
var slink=$（this.find（“link”）.text（）；
//控制台日志（“i:+i”）；
输出+=“
”+text+“
”；
});
输出+=“
”；

产生：

我必须让p标签包围UL标签

更新* 感谢所有这些帮助：只需发布我的最终代码，以便在将来帮助其他人：

$(xml).find("category").each(function()
    {   

        var output += '<h3>' +$(this).find("title").text() + '</h3>' ;
        var div = '<div>';
        output += '<ul>';   

        $(this).find('items > item').each(function() {
            var text = $(this).find("text").text();
            var slink = $(this).find("link").text();


            output += "<li class='subLink' src='"+ slink +"'>"  + text + "</a></li>";
        });

        output += '</ul>';      


    });
    //console.log(output);

    var icons = {
  header: "ui-icon-circle-arrow-e",
  activeHeader: "ui-icon-circle-arrow-s"
};
$('<div>')
.attr('id','accordionSub')
.html(output)       
.appendTo('#accordionSubB').delay(1).queue(function(){
    $( "#accordionSub" ).accordion({
                heightStyle: "content",
                collapsible: true,
                icons: icons
            });
}); 

$（xml）.find（“category”）.each（function（）
{   
var输出+=''+$（this）.find（“title”）.text（）+''；
var div=''；
输出+='
'；
$（this）.find（'items>item'）。每个（函数（）{
var text=$（this.find（“text”）.text（）；
var slink=$（this.find（“link”）.text（）；
输出+=“
”+text+“
”；
});
输出+='
'；
});
//控制台日志（输出）；
变量图标={
标题：“ui-icon-circle-arrow-e”，
activeHeader：“ui-icon-circle-arrow-s”
};
$('')
.attr（'id'，'accordionSub'）
.html（输出）
.appendTo（'#accordiossubb'）.delay（1）.queue（函数（）{
$（“#手风琴sub”）。手风琴({
高度样式：“内容”，
可折叠的：是的，
图标：图标
});
}); 

Append和内部html是两个不同的东西-Append接受dom元素并将其插入父元素中

你可以这样做

var ul = $('<ul/>');
$('<li/>').html("Some Text").appendTo(ul);
$('<li/>').html("More Text").appendTo(ul);

---

Append和内部html是两种不同的东西-Append接受dom元素并将其插入父元素中

你可以这样做

var ul = $('<ul/>');
$('<li/>').html("Some Text").appendTo(ul);
$('<li/>').html("More Text").appendTo(ul);

---

我以前也有过类似的问题。如果将所有生成的HTML存储在一个变量中，这比append更好。例如：

var output = '<ul>';

for(var i = 0; i < 10; i++){
    output += '<li></li>';
}

output += '</ul>';

$(elem).append(output);

var输出='
'；
对于（变量i=0；i<10；i++）{
输出+='
'；
}
输出+='
'；
$（元素）。追加（输出）；

---

此外，这种方法将大大降低CPU使用率。在您的解决方案中，您总是在每个cicle中操纵DOM。那真是一种低效的方法。

我以前也有过类似的问题。如果将所有生成的HTML存储在一个变量中，这比append更好。例如：

var output = '<ul>';

for(var i = 0; i < 10; i++){
    output += '<li></li>';
}

output += '</ul>';

$(elem).append(output);

var输出='
'；
对于（变量i=0；i<10；i++）{
输出+='
'；
}
输出+='
'；
$（元素）。追加（输出）；

---

此外，这种方法将大大降低CPU使用率。在您的解决方案中，您总是在每个cicle中操纵DOM。这是一种非常低效的方法。

这不是有效的方法。它需要一个完整的HTML片段。您可能需要创建一个文本字符串，然后在完成处理后将其全部附加到

#accordiosub

。现在append正在看到一个未关闭的

div

和

ul

并且正在为您关闭它们，因为您正在分步进行append。您正在关闭一个未打开的锚定标记<代码>p元素是否可以包含块元素？这可能是整个问题所在，这意味着您尝试执行的操作无法完成，因为浏览器将撤消它。从

元素的允许内容中，是“语法内容”，它不包括

元素。您的浏览器正在通过关闭

标记自动修复无效的html。这不是工作方式。它需要一个完整的HTML片段。您可能需要创建一个文本字符串，然后在完成处理后将其全部附加到

#accordiosub

。现在append正在看到一个未关闭的

div

和

ul

并且正在为您关闭它们，因为您正在分步进行append。您正在关闭一个未打开的锚定标记<代码>p元素是否可以包含块元素？这可能是整个问题所在，这意味着您尝试执行的操作无法完成，因为浏览器将撤消它。从

元素的允许内容中，是“语法内容”，它不包括

元素。您的浏览器正在通过关闭

标记自动修复无效的html。我遵照您的建议，但我的p标记仍然会造成问题（请参见上面的编辑），您无法将块元素包装到p中，因为p是内联元素。浏览器将自动剥离它们，并在出现块元素时关闭每个p。将您的p标记更改为div或section…我遵照您的建议，但我的p标记仍然会造成问题（请参见上面的编辑），您无法将块元素包装到p中，因为它是内联元素。浏览器将自动剥离它们，并在出现块元素时关闭每个p。将p标记更改为div或section。。。