Question

我有一个动态获取的div，结构如下。

      <div id="mainWrap">
            <div style="z-index: 1001; height: 407px; width: 328px; top: 150px; left: 601.5px;" id="com-TMRJDOR2KOET3X6JPV6XGU0FB7RGJ926" class="textBox contentBox">
               <div style="" class="editable"><p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, </p>
               </div>
            </div>

            <div style="z-index: 1002; height: 616px; width: 288px; top: 29px; left: 3.5px;" id="com-UPWTMKZ7OUTN8KG2JEK47LNPN5JO261H" class="textBox contentBox">
               <div style="" class="editable"><p>
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
              </div>
           </div>            
      </div>

现在，我想删除所有孩子的ID，就像这样。

      var getContent = $('#mainWrap');
      var finalContent = getContent.clone().children().removeAttr('id');
      var saveContent  = finalContent.parent().html();

但是我得到了最外层div的内部div，即mainWrap。我还希望在我得到的html中返回mainWrap div。

这是我尝试做的，在某种程度上有效：

    $.fn.getOuter = function(val){
      return $('<div class="temp">').append($('#'+val).clone()).html();
    }
    var htmlPage = $.fn.getOuter('mainWrap');

如果我alert(htmlPage)我得到了整个内容。但是当我尝试使用此var content=$(htmlPage).children().removeAttr('id');删除id属性时，我没有得到正确的HTML.I仍然只有{{1} {1}}。我不确定我在哪里错了。任何帮助都会受到赞赏谢谢你的时间。

Answer 1

问题是因为当您在最终内容中执行.parent()时，没有父级，因为您已将元素克隆到内存中。相反，将其包装在另一个div中并获取html()。我也略微修改了逻辑，试试这个：

var $getContent = $('#mainWrap').clone();
$getContent.children().removeAttr('id');
var saveContent  = $getContent.wrap('<div></div>').parent().html();

Answer 2

这是一个有效的简单示例（JSFiddle）：

<div id="id1">
    <span>some text</span>
    <div id="someid">some more text</div>
</div>

<textarea id="ta"></textarea>

var getContent = $('<div>').append($("#id1").clone());
getContent.find("*").removeAttr("id");
$("#ta").val( getContent.html() );

您可以将克隆的元素动态附加到div。我使用find("*")因为children()只获得getContent的直接后代。我假设您想删除所有id属性，无论它们有多深。

获取最外层div元素的HTML（最高父级）

2 个答案: