Entourer des paragraphes par un div

Bonjour à tous,
Je débute en jquery et j'espère que vous ne m'en tiendrez pas rigueur.
Je voudrais, dans plusieurs div 'caption' contenant chacun un nombre variable de paragraphes, entourer le premier paragraphe par un div 'title' et les suivants par un autre div.

Exemple

Le div à transformer:

<div class="caption">
  <p>Premier paragraphe</p>
  <p>Deuxieme paragraphe</p>
  <p>Troisième paragraphe</p>
  <!-- ... -->
  <p>Nième paragraphe</p>
</div>

<div class="caption">
  <p>Premier paragraphe</p>
  <p>Deuxieme paragraphe</p>
  <p>Troisième paragraphe</p>
  <!-- ... -->
  <p>Nième paragraphe</p>
</div>

Résultat à obtenir:

<div class="caption">

  <div class="title">
    <p>Premier paragraphe</p>
  </div>

  <div class="content">
    <p>Deuxieme paragraphe</p>
    <p>Troisième paragraphe</p>
    <!-- ... -->
    <p>Nième paragraphe</p>
  </div>

</div>

J'arrive à traiter le premier paragraphe de chaque div en appliquant le code suivant:

$('.caption').each(function(index) {
  $(this)
    .find('p:eq(0)') // premier paragraphe
    .wrap('<div class="title"></div>');
});

mais je ne vois pas comment entourer les paragraphes suivants.

Merci d'avance pour votre aide.

Richard

tu remplaces ton class="caption" par id="caption1" puis un "caption2" etc
et tu les appelles par un getElementById()
dans ton script '$('.caption').each(function(index)' ne répond qu'au premier .caption du dom qu'il rencontre
et, à mon avis, ne tient pas compte du 'each'
Modifié par gazobu (20 Apr 2013 - 01:40)

Bonjour,

Si le but de l'opération est uniquement de styler les différents paragraphes, le CSS et les sélecteurs peuvent le faire, non ?

Bonjour,
Il s'agit d'uune mise en forme pour tumblr. Il se trouve que les billets 'photo' ne comportent pas de champ 'titre'. J'ai donc décidé que le premier paragraphe du champ 'caption' servirait de titre. Ce titre sera composé de 3 lignes :

<div class="caption">
<div class="title">
<p>
<span class="ligne1">paragraphe 1 - ligne1<span><br />
<span class="ligne2">paragraphe 1 - ligne2<span><br />
<span class="ligne3">paragraphe 1 - ligne3<span>
</p>
</div>
<div class="content">
<p>Paragraphe 2</p>
<p>Paragraphe 3</p>
<!-- ... -->
<p>Paragraphe n</p>
</div>
</div>

$(document).ready(function(){
$('.caption').each(function(index) {
	var el = $(this);
    el.find('p:eq(0)').wrap('<div class="title" />');
	el.find('p:gt(0)').wrapAll('<div class="content" />');
});
});

Cordialement
Modifié par tazzkiller (22 Apr 2013 - 01:22)

merci beaucoup