Question

这里我使用的是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()在这里有什么不同？

Answer 1

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

您的第一个代码是什么：

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

对.html()和$.trim()的调用都会确保您的Html var包含字符串，而不是实时DOM对象。

    $(Html) ...

这会将Html字符串转换为新 DOM对象（您不会将其分配到var中），

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

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

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

但是，您可以使用原始Html字符串更改DivRprt的html。

您的其他代码的作用：

    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);
    }

Answer 2

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

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

它也可以在没有.clone()的情况下工作，因为如果您正在修改jQuery集合而不将其保存到变量或调用.appendTo()，那些变化将会丢失。

<强>改进

而不是做DOM - ＆gt; HTML序列化后跟HTML - ＆gt; DOM，您可以跳过一步，避免通过这样做来保留任何变量：

$(data).find("#divpob")
    .find(".lblpob")
        .text("UserName" + Username) // modify
        .end()
    .appendTo('.DivRpt'); // append to container

Answer 3

对于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)是即时对象，你正在操纵即时对象。

所以你的操作就会消失。

html中的jquery克隆元素

3 个答案:

您的第一个代码是什么：

您的其他代码的作用：

我的选择：

或者：