Как вставить фрагмент кода программным путем с помощью 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 с шириной до 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>")