Question

I have multiple sections… within these sections there are few child elements… I need to manipulate so that for each of the section move 1 element e.g. .inner after another element e.g. h1

my attempt is here http://jsfiddle.net/shavindra/LDpwq/1/ but the problem is it’s not looping through and print good at the end.. but I want the output to be different as shown below…

Initial state:

<section class="greeting">
  <h2>Greetings 1</h2>
  <div class="time">Morning</div>
  <div class="inner">Good 1</div>
</section>

<br />
<br />

<section class="greeting">
  <h2>Greetings 1</h2>
  <div class="time">Afternoon</div>
  <div class="inner">Good 2</div>
</section>

<br />
<br />

<section class="greeting">
  <h2>Greetings 1</h2>
  <div class="time">night</div>
  <div class="inner">Good 3</div>
</section>

After manipulation

<section class="greeting">
  <h2>Greetings 1</h2>
  <div class="inner">Good 1</div>
  <div class="time">Morning</div>
</section>

<br />
<br />

<section class="greeting">
  <h2>Greetings 1</h2>
  <div class="inner">Good 2</div>
  <div class="time">Afternoon</div>
</section>

<br />
<br />

<section class="greeting">
  <h2>Greetings 1</h2>
  <div class="inner">Good 3</div>
  <div class="time">night</div>
</section>

Answer 1

There was two problems with your original code:

$(".greeting").each(function() {
    $(this).children('.time').addClass("on");
    $(this).children('.time').after($('.inner'));
});

1) you’re selecting all the elements with inner class to move after:

$('.inner')

Intead, use only the one in the current div:

$(this).children('.inner')

2) You´re using the after function, whichs inserts the content passed as parameter after the element on which you call the function. On the other hand insertAfter operates in the inverse way. From jQuery doc:

With .after(), the selector expression preceding the method is the
container after which the content is inserted. With .insertAfter(), on
the other hand, the content precedes the method, either as a selector
expression or as markup created on the fly, and it is inserted after
the target container.

So you can change your code to this:

$(".greeting").each(function() {
    $(this).children('.time').addClass("on");
    $(this).children('.time').insertAfter($(this).children('.inner'));
});

or this:

$(".greeting").each(function() {
    $(this).children('.time').addClass("on");
    $(this).children('.inner').after($(this).children('.time'));
});