Question

I am just stuck in one simple jQuery question.
I am trying to each span element prependTo p element, but jQuery is repeating each span 3 times (because I have 3 span elements). Ok it is hard to explain.

Just look at Fiddle code – http://jsfiddle.net/fTjcy/1/

HTML:

<div class="events">

<div class="event">
<span class="red">31.08.11  - </span>
<p>...</p>

</div> <!-- END OF New -->



<div class="event">
<span class="red">28.08.2011  - </span><p>...</p>
</div> <!-- END OF New -->



<div class="event">
<span class="red">20.08.2011  - </span><p>...</p>
</div> <!-- END OF New -->

</div>

I wanna achieve :

<div class="events">

<div class="event">

<p><span class="red">31.08.11  - </span>...</p>
</div> <!-- END OF New -->



<div class="event">
<p><span class="red">28.08.2011  - </span>...</p>
</div> <!-- END OF New -->



<div class="event">
<p><span class="red">20.08.2011  - </span>...</p>
</div> <!-- END OF New -->

</div>

jQuery:

$('.event span.red').hide().prependTo('.event p').show();

Answer 1

You need to target the current span only, and prepend it to the relative p only.

var p = $('.event p');

$('.event span.red').hide().each(function(i) {
    $(this).prependTo( p[ i ] ).show();
});

Example: http://jsfiddle.net/fTjcy/3/