3

这里我使用 jQuery ajax：

$.ajax({
    type: "GET",
    url: URL,
    data: { Mode: "POB1"},
    success: function (data) {
        var Html = $.trim($(data).find("#divpob").html());
        if (Html) {
            $(Html).find(".lblpob").text("UserName" + Username);
            $(".DivRprt").html(Html);
        }
    }
});

这里的值lblpob没有改变，但如果我.clone()这样使用

if (Html) {
    var Html2 = $(Html).clone(true);
    $(Html2).find(".lblpob").text("UserName" + Username);
    Html = Html2;
    $(".DivRprt").html(Html);
}

lblpob变了。

这里有什么不同.clone()？

4

3 回答 3

7

临时 DOM 对象和 html 作为字符串存在问题。我将逐行分解：

您的第一个代码的作用：

    var Html = $.trim($(data).find("#divpob").html());

调用.html()和$.trim()确保您的Htmlvar 包含一个string，而不是一个活动的 DOM 对象。

    $(Html) ...

这会将Html字符串转换为一个新的DOM 对象（您不会将其分配给 var），

    ... .find(".lblpob").text("UserName" + Username);

并更改这个未命名的 DOM 对象。不是你的Html字符串。

    $(".DivRprt").html(Html);

但是这里你使用原始Html字符串来更改 .html 的 html DivRprt。

你的其他代码做什么：

    var Html2 = $(Html).clone(true);

在创建一个新的 DOM 对象并克隆它之后，你将它分配给Html2,

    $(Html2).find(".lblpob").text("UserName" + Username);

在这里你可以操纵它。

    Html = Html2;
    $(".DivRprt").html(Html);

所以在这里你将被操纵的 DOM 对象插入.DivRprt

我的选择：

您不需要.clone()，只需跟踪第一个 DOM 对象：

    if (Html) {
        var Html2 = $(Html)
        Html2.find(".lblpob").text("UserName" + Username);
        $(".DivRprt").html(Html2);
    }

或者：

只是不要将修剪后的数据转换回字符串

    var Html = $(data).find("#divpob");
    if (Html.length) {
        Html.find(".lblpob").text("UserName" + Username);
        $(".DivRprt").html(Html);
    }
于 2013-02-07T07:19:28.260 回答
1

在第二种情况下，您将 jQuery 结果保存到一个变量中：

var Html2 = $(Html).clone(true);

如果没有 jQuery 集合，它也可以工作.clone()，因为如果您对 jQuery 集合进行修改而不将其保存到变量中或调用.appendTo()，那么这些更改将会丢失。

改进

您可以跳过一个步骤并避免通过执行以下操作来保留任何变量，而不是执行 DOM -> HTML 序列化然后执行 HTML -> DOM：

$(data).find("#divpob")
    .find(".lblpob")
        .text("UserName" + Username) // modify
        .end()
    .appendTo('.DivRpt'); // append to container
于 2013-02-13T03:38:49.680 回答
0

对于 jQuery 操作 DOM，元素必须在 DOM 上。

代替：

var Html = $.trim($(data).find("#divpob").html());

代替：

var Html = $(data).find("#divpob");

代替：

$(Html).find(".lblpob").text("UserName" + Username);

代替：

Html.find(".lblpob").text("UserName" + Username);

代替：

$(".DivRprt").html(Html);

代替：

p$(".DivRprt").html(Html.html());

因为;

$(Html).find(".lblpob").text("UserName" + Username);

在这里，$(Html)是即时对象，您正在操纵即时对象。

所以你的操纵消失了。

于 2013-02-13T03:22:38.823 回答