如何從jquery中的不同長度列表追加多個div？

Question

在這裏，我有兩個不同的容器。首先是一組錨鏈接。 html中沒有元素。第一部分不同組的內容塊。如何基於一組內容塊追加元素。

這裏是我的html，

<div id="group1"> 
    <div class="parent1"> 
    </div> 
    <div class="parent2"> 
    </div> 
    <div class="parent3"> 
    </div> 
</div> 
<div id="group2"> 
    <div class="parentMain1"> 
     <div class="content">test</div> 
     <div class="content">test</div> 
     <div class="content">test</div> 
    </div> 
    <div class="parentMain2"> 
     <div class="content">test</div> 
     <div class="content">test</div> 
    </div> 
    <div class="parentMain3"> 
     <div class="content">test</div> 
    </div> 
</div> 

我的結果應該是，

<div id="group1"> 
     <div class="parent1"> 
      <a href="#">1</a> 
      <a href="#">2</a> 
      <a href="#">3</a> 
     </div> 
     <div class="parent2"> 
      <a href="#">1</a> 
      <a href="#">2</a> 
     </div> 
     <div class="parent3"> 
      <a href="#">1</a> 
     </div> 
    </div> 
    <div id="group2"> 
     <div class="parentMain1"> 
      <div class="content">test</div> 
      <div class="content">test</div> 
      <div class="content">test</div> 
     </div> 
     <div class="parentMain2"> 
      <div class="content">test</div> 
      <div class="content">test</div> 
     </div> 
     <div class="parentMain3"> 
      <div class="content">test</div> 
     </div> 
    </div> 

如何實現這一個jquery的？

Answer 1

你可以試試這個代碼：

// get all direct child of group 2 element 
$('#group2').children().each(function (i, e) { 
// get direct child of group 2 element's child 
    var length = $(this).children().length; 
    // loop over particular length 
    for (var m = 1; m <= length; m++) { 
    // create anchor element 
    $('<a/>', { 
     href: '#', 
     text: m 
    }).appendTo($('div#group1').find('div:eq(' + i + ')')); // append to group 1 element respectively 
    } 
}); 

DEMO