2017-06-14 83 views
1

的第一次出现我有这样的:元素越来越裹在父母的

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

BU牛逼

时,我有两个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的数据第二个一包成d和保持它在第一个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> 
+2

你只需要循环:HTTPS: //jsfiddle.net/ykdrcrnt/ –

+0

@ Karl-AndréGagnon谢谢。 – NaMo

回答

0

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

+0

谢谢12345678. – NaMo

+1

@ user6803164请高兴穆罕默德的回答。 – kblau

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

不知道'wrapInner',非常感谢。经过一些测试后,不需要'.each':https://jsfiddle.net/ykdrcrnt/1/ –