Question

我有这个：

<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>

Answer 1

您可以尝试：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>IndexGH1</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnGo").click(function () {
                //rap b,c in d
                //this takes
                //from:
                //<div class="A">
                //  <div class="B"></div>
                //  <p>Text1</p>
                //  <div class="C"></div>
                //</div>
                //to:
                //<div class="A">
                //  <div class="D">
                //      <div class="B"></div>
                //      <p>Text1</p>
                //      <div class="C"></div>
                //  </div>
                //</div>
                //$(".A").wrapInner("<div class='D'></div>"); 

                var elems = $(".A").each(function () {
                    $(this).wrapInner("<div class='D'></div>");
                })

            })

        })
        </script>
</head>
<body>
    @*1st example, note i am useing wrapinner instead of wrapall
    <div class="A">
        <div class="B"></div>
        <p>Text1</p>
        <div class="C"></div>
    </div>*@
    <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>
    <input type="button" id="btnGo" value="Go" />
</body>
</html>

Answer 2

您可以使用.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>

元素在父类的第一次出现时被包裹起来

2 个答案: