Jquery 追加未按预期顺序工作

Question

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

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

之前调用函数

P.s Fiddle http://jsfiddle.net/s6d5wytf/

Answer 1

当您附加格式错误的 HTML 时，浏览器将尽最大努力将其转换为格式正确的 HTML 因此当您这样做时：

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

浏览器看到它有一个打开的 <ul> 标签，但没有 </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 次，则可以忽略不计。

Jquery 追加未按预期顺序工作

Jquery Append is not working in expected order

html

javascript

jquery