jQuery 迭代 html "blob"/document - 无法访问属性

Question

前提:

我想从文档中取出一 block html，然后更改 div id，并在同一文档中原始 html 下方重新打印经过一些修改的相同 html block 。我会重复这“X”次。

问题:

当我尝试重新打印时，我似乎无法访问 html block 中的 div。

我的步数

• 我在页面上有一些 html，包含在 div 中，

  <div id="a">
     <div id="aaa">...</div>
     <div id="bbb">...</div>
     <div id="ccc">...</div>
  </div>
  

我使用 jQuery 提取此 html

var h = $("#a").html();

我将它转换为 jQuery 对象

var jqObj = $(h);

然后查看里面的div

$("div", jqObj).each(function (idx, elem) {
       //elem is a HTMLDivElement type
        var jq = $(this);
       // I want to access the id, class etc. of the div elements here            
    });

“each”正确迭代的次数与 div 的数量相同。

但无论我做什么，无论是 $(this).attr("id") 还是 elem.id 或者其他什么，它都会返回未定义的状态。我打印了 $(this).html() ，它似乎有内容，但 div 中的所有 id 似乎都被删除了。

我做错了什么？如何获取此 HtmlDivElement 的 id(我需要在再次打印 html 之前更改它们)和其他属性？

问题已解决

请参阅下面有关使用clone() 的评论。这是我的函数，以防其他人需要它。

function Inserts() {
    //get the html    
    var h = $("#a").clone();

    //now turn it into a jquery object
    var jqObj = $(h);

    //now parse it, let's make some modifications
    var someID = "0";
    $("div", jqObj).each(function (idx, elem) {

        if ($(this).attr("id") == undefined)
            return;

        $(this).attr("id", someID + "_" + $(this).attr("id"));
    });

    $("#target_div").append(jqObj.html());

}

Answer 1

使用clone而不是获取 html 并创建新元素。克隆后，您可以在将 block 重新插入所需位置之前更改属性。

请注意，在重新插入之前更改对象的 id 是准强制的。使用 attr("id","anotherId") 来做到这一点。