Элемент ввода jQuery .before() и .after() не работают должным образом, что я делаю неправильно?

Question

Я пытаюсь динамически окружать множества IMG и тегов тегом div, но я не могу заставить его работать.

мой HTML:

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

мой сценарий:

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

мой результат Firebug:

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

То, что я пытаюсь сделать:

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

я заменил

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

с

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

просто чтобы увидеть, если он не смог выполнить .next(). После того, как (код), но он отлично работает. Я новичок в использовании jQuery и не могу понять, что я делаю неправильно. Может ли кто-нибудь помочь? Пожалуйста.

Answer 1

Вы можете использовать .wrapAll(), как это:

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

You can test it out here, это занимает <img> и <a> затем заворачивает их как в этом <div> контейнере.

Answer 2

Вы также могли бы избавиться от каждого() (или просто заменить это с селектором в сниппет Ника):

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