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

Question

Я пытаюсь динамически окружить наборы тегов IMG и A тегом 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 (). After (), ноэто работает отлично.Я новичок в использовании jQuery и не могу понять, что я делаю неправильно.Может кто-нибудь помочь?Пожалуйста.

Answer 1

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

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

Вы можете проверить это здесь , это займет <img> и <a>затем оборачивает их оба в этот <div> контейнер.

Answer 2

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

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