新年快乐。我正在尝试创建分页链接。所以基本上我的代码很大,所以我创建了下面的代码以便于理解。
<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/
最佳答案
当您附加格式错误的 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 次,则可以忽略不计。
关于javascript - Jquery Append 未按预期顺序工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27763690/