jQuery only "this". Easy question

I am just stuck in one simple jQuery question. I am trying to each span element prependTo p element, but jQ开发者_如何转开发uery 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();

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/

Try this

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

$('.event span.red').each(function() {
    var paragraph = $(this).closest('.event').find('p');
    $(this).hide().prependTo(paragraph).show();
});