Как вставить часть кода программно, используя jQuery?

Question

Я изучаю jQuery, и я хотел бы использовать его для решения старой проблемы, с которой я столкнулся.Я хотел бы использовать jQuery для программного добавления фрагмента HTML-кода.Что мне нужно сделать, это: создать функцию jQuery, которая «разбирает» все элементы / объекты, которые находятся внутри div.Когда моя функция получает объект img, я бы хотел поместить img в другой div.

Чтобы все было понятно, давайте предположим, что моя функция анализирует этот фрагменткода :

<div class="entry">
<img height="200" width="300" src="image-2.jpg" title="my image 1" class="alignnone size-medium wp-image-25">
<em>This is my image!</em>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper.</p>

<img height="400" width="250" src="image-2.jpg" title="my image 2" class="alignnone size-medium wp-image-25">
<em>This is another image!</em>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper.</p>
</div>

Я хотел бы написать функцию jQuery, которая изменяет ее на :

<div class="entry">
<div class="main-image">
    <img height="100" width="200" src="image-2.jpg" title="my image 1" class="attachment-single-post-image wp-post-image">
</div>
<em>This is my image!</em>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper.</p>

<div class="main-image">
    <img height="100" width="200" src="image-2.jpg" title="my image 2" class="attachment-single-post-image wp-post-image">
</div>
<em>This is another image!</em>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper.</p>
</div>

Затем "в основном", чтоЯ хочу сделать это:

1. Поместить все img объекты между <div class="main-image"> и </div>;
2. Заменить класс img на attachment-single-post-image wp-post-image;
3. Заменить img s на 100;
4. Заменить img s на 300.

Вот и все:)

Я не знаю, понятно ли мое объяснение.К сожалению, я не являюсь носителем английского языка.

Answer 1

var searchScope = $('div.entry');

var img = $("img", searchScope)
          .attr("height", 100)
          .attr("width", 300)
          .removeClass()
          .addClass("attachment-single-post-image wp-post-image")
          .wrap("<div class='main-image'></div>")