0

我有 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>");
        }
}

结果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>

为什么 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>";

产生：

<-div><-p></-/p><-ul><-li></-/li></-/ul><-p></-/p>

我必须让 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
            });
});
4

2 回答 2

2

我以前也有类似的问题。最好将所有生成的 HTML 存储在一个变量中，而不是追加。例子：

var output = '<ul>';

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

output += '</ul>';

$(elem).append(output);

此外，这种方法将花费您更少的 CPU 使用率。在您的解决方案中，您总是在每个 cicle 中操作 DOM。这是一种非常低效的方式。

于 2013-03-05T20:56:40.890 回答
1

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

你可以做这样的事情......

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

然后当你准备好

$(some container).append(ul);
于 2013-03-05T20:55:45.960 回答