CODEWITHSUNDEEP
jqueryhtml
Rexhep Rexhepi
Rexhep Rexhepi

Reputation: 137

Moving DIV inside of elements

Considering something like this

<div class="wrapper">
  <div class="items">Item 1</div>
  <div class="items">Item 2</div>
  <div class="items">Item 3</div>
  <div class="items">Item 4</div>
  <div class="items">Item 5</div>
  <div class="items">Item 6</div>
</div>

I'm trying to put one DIV if wrapper is > 3 and other if wrapper is > 5

  <div class="d1">ADS</div>
  <div class="d2">ADS</div>

My code should look like this:

<div class="wrapper">
  <div class="items">Item 1</div>
  <div class="items">Item 2</div>
  <div class="items">Item 3</div>
  <div class="d1">ADS</div>
  <div class="items">Item 4</div>
  <div class="items">Item 5</div>
  <div class="d2">ADS</div>
  <div class="items">Item 6</div>
</div>

I'm using appendTo() method of jQuery, but think that I can't reach the solution that I want.

$(function() {
  var numItems = $('.wrapper').length;
  if(numItems > 3) {
      $(".d1").appendTo(".wrapper .items");
  }
});

Upvotes: 0

Views: 37

Answers (2)

Pradeep
Pradeep

Reputation: 140

You can use 

    $('.d1').insertAfter('.items:nth-child(2n+1)');

If you want to insert a div after every odd items. You can hardcode n to any integer of your requirement. Like to insert after third element, replace n with 1, i.e 2*1 + 1 = 3 equivalent to 

 $('.d1').insertAfter('.items:nth-child(3)');

Similarly n=2 for 5th element. n=3 for 7th element and so on..

Upvotes: 1

madalinivascu
madalinivascu

Reputation: 32354

Use nth-child selector and insertAfter function

$(".d1").insertAfter('.items:nth-child(3)');
$(".d2").insertAfter('.items:nth-child(6)');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="items">Item 1</div>
  <div class="items">Item 2</div>
  <div class="items">Item 3</div>
  <div class="items">Item 4</div>
  <div class="items">Item 5</div>
  <div class="items">Item 6</div>
</div>
 <div class="d1">ADS</div>
  <div class="d2">ADS</div>

Upvotes: 4

Related Questions