Question

我正在运行以下功能：

    $(function () {
    var tbl = $('table[id^="stg_"]');
    var tmpl = tbl.attr('id').replace('stg_', '');

    // how many elements before
    console.log($(":input, select").length);

    $.get('templates/' + tmpl + '.html', function (data) {
        tbl.html(data);
    });

    // same number after ?
    console.log($(":input, select").length);
});

然而，似乎jQuery没有修改DOM，因为我在设置表格的html之前和之后在我的.length选择器上获得相同的":input, select"。

这只是一个测试，但我很好奇是否有人曾经尝试过这个或者在设置表格的.html之后知道为什么长度会相同。

Answer 1

$.get是异步的，第二个日志显示相同的数字，因为它是在ajax完成之前记录的，请尝试

console.log($(":input, select").length);
$.get('templates/' + tmpl + '.html', function (data) {
    tbl.html(data);
    console.log($(":input, select").length);//probably it will give a different number
});

或您当前的情景集async:false （强烈不推荐）

$(function () {
    $.ajaxSetup({
       async:false
    });
    var tbl = $('table[id^="stg_"]');
    var tmpl = tbl.attr('id').replace('stg_', '');

    // how many elements before
    console.log($(":input, select").length);

    $.get('templates/' + tmpl + '.html', function (data) {
        tbl.html(data);
    });   

    console.log($(":input, select").length);
});

Answer 2

尝试：

$.get('templates/' + tmpl + '.html', function (data) {
    tbl.html(data);
    console.log($(":input, select").length);
});

您正在进行异步请求并在完成ajax请求之前打印元素数量。因此，请尝试在异步执行的回调中打印计数。

Answer 3

$.get是asycnchronous - 它触发了它的请求，代码继续运行。结果，console.log($(":input, select").length);在$get返回之前执行。将console.log($(":input, select").length);添加到回调中（tbl.html(data)之后），您会看到更好的结果。

Answer 4

你首先报告长度，然后才操纵dom;）。 @Nemoy和@ 3nigma说的是什么。

jQuery .html（）是否操纵DOM？

4 个答案: