jQuery insérant l'élément .before() et .after() ne fonctionne pas comme prévu, qu'est-ce que je fais mal?

Question

J'essaie d'entourer dynamiquement des ensembles de balises IMG et A avec une balise div mais je n'arrive pas à le faire fonctionner.

mon html:

<img class="myClass-1" src="img5" /> 
<a class="myClass-2" href="url"></a> 

mon script:

$('img.myClass-1').each(function(){ 
    $(this).before('<div style="position: relative;">'); 
    $(this).next().after('</div>'); 
}); 

mes résultats Firebug:

<div style="position: relative;"/> 
<img class="myClass-1" src="img5" /> 
<a class="myClass-2" href="url"></a> 

Ce que je suis en train d'accomplir:

<div style="position: relative;"> 
<img class="myClass-1" src="img5" /> 
<a class="myClass-2" href="url"></a> 
</div> 

Je remplacé

$(this).next().after('</div>'); 

avec

$(this).next().after('<p>test</p>'); 

juste pour voir si elle était incapable d'exécuter .next(). Après() le code, mais il fonctionne très bien. Je suis nouveau à l'utilisation de jQuery et ne peux pas comprendre ce que je fais mal. Quelqu'un peut-il aider? S'il vous plaît.

Answer 1

Vous pouvez utiliser .wrapAll(), comme ceci:

$(this).next().andSelf().wrapAll('<div style="position: relative;" />'); 

You can test it out here, cela prend <img> et <a> puis enveloppe fois dans ce conteneur <div>.

Answer 2

Vous pouvez également vous débarrasser de l'each() (ou tout simplement le remplacer par votre sélection dans l'extrait de Nick):

$('img.myClass-1').next().andSelf().wrapAll('<div style="position: relative;" />');