CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sathya
Sathya

Reputation: 1734

how to append multiple div from different list of length in jquery?

Here, I have two different container. First one is group of anchor links. There is no elements in html. Section one different group of content blocks. How to an append elements based on group of content blocks.

Here is my 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>

My result should be,

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

How to achieve this one with jquery?

Upvotes: 0

Views: 73

Answers (1)

Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

You can try this code :

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

Upvotes: 1

Related Questions