Jquery Append无法按预期顺序运行

Question

新年快乐.我正在尝试创建分页链接.所以基本上我的代码很大所以我创建了下面的代码,以便于理解.

<div id = "test"></div>

func1();

function func1() {
    $("#test").append("<nav><ul class='pagination pagination-lg'>");
    func3();
    $("#test").append("</ul></nav>");
}

function func2() {

$("#test").append("<li>data</li>"); 
}

function func3() {
func2();
}

我希望结果是这样的

<nav><ul class="pagination pagination-lg"><li>data</li></ul></nav>

但输出是

<nav><ul class="pagination pagination-lg"></ul></nav><li>data</li>

为什么会发生这种情况？尽管我在追加函数之前调用函数 </ul></li>

Ps Fiddle http://jsfiddle.net/s6d5wytf/

Answer 1

当您附加格式错误的HTML时,浏览器会尽力将其转换为格式良好的HTML,以便您执行以下操作时:

    $("#test").append("<nav><ul class='pagination pagination-lg'>");

浏览器看到它有一个<ul>没有a 的打开标签,</ul>并假设你已经完成了 - 特别是因为一个鲜为人知的事实是</ul>标签是隐含的并且可以由浏览器推断.

所以 - 你在第一手概念上追加的是:

    $("#test").append("<nav><ul class='pagination pagination-lg'></ul></nav>");

你想要做的是使用你构造的临时元素并追加或链接字符串.这是第一种方法的一个例子

function func1() {
    var menu = $("<nav></nav>"); // create but not add anywhere
    menu.append("<ul class='pagination pagination-lg'></ul"); // add ul
    func3(menu);
    $("#test").append(menu);
}

function func2(menu) {
    menu.find("ul").append("<li>data</li>"); 
}

这也有一个额外的好处,即只查询一次实际文档,但速度更快,但如果你只做了3次就可以忽略不计了.