javascript - 元素包裹在父类的首次出现中

我有这个：

<div class="A">
    <div class="B"></div>
        <p>Text1</p>
    <div class="C"></div>
</div>

我可以使用wrapAll（）做到​​这一点：

<div class="A">
    <div class="D">
        <div class="B"></div>
             <p>Text1</p>
        <div class="C"></div>
    </div>
</div>

jQuery：

$(document).ready(function () {
    $('.B, .C').wrapAll('<div class="D">');
});

但

当我有两个A时，例如：

<div class="A">
    <div class="B"></div>
        <p>Text1</p>
    <div class="C"></div>
</div>

<div class="A">
    <div class="B"></div>
        <p>Text2</p>
    <div class="C"></div>
</div>

它被转换为：

<div class="A">
    <div class="D">
        <div class="B"></div>
            <p>Text1</p>
        <div class="C"></div>
        <div class="B"></div>
            <p>Text2</p>
         <div class="C"></div>
     </div>
</div>
<div class="A"></div>

它将第一个A和第二个A的数据包装到D中，并将其保留在第一个A中。我想将两个A的内容与自己的内容分开。我希望输出为：

<div class="A">
    <div class="D">
        <div class="B"></div>
            <p>Text1</p>
        <div class="C"></div>
     </div>
</div>
<div class="A">
    <div class="D">
        <div class="B"></div>
            <p>Text2</p>
        <div class="C"></div>
     </div>
</div>

最佳答案

您可以使用.each：

$(document).ready(function(){
  $(".A").each(function(){
    $(this).children().wrapAll("<div class='D' />");
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="A">
    <div class="B"></div>
        <p>Text1</p>
    <div class="C"></div>
</div>

<div class="A">
    <div class="B"></div>
        <p>Text2</p>
    <div class="C"></div>
</div>

关于javascript - 元素包裹在父类的首次出现中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44554533/