Как добавить тег div после переноса с помощью jQuery?

Question

Я хочу изменить следующее,

<div id="system">
   <div id="product_cont img">
      <img src="image1.jpg" />
      <img src="image2.jpg" />
      <img src="image3.jpg" />
..
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nunc porta euismod luctus. Curabitur vehicula scelerisque diam at vestibulum.     
Pellentesque in lacus et augue malesuad.
   </div>
</div>

на подобное.

<div id="system">
    <div id="product_cont img">
      <ul class="cont_thumb">
        <li><img src="image1.jpg" /></li>
        <li><img src="image2.jpg" /></li>
        <li><img src="image3.jpg" /></li>
         ...
       </ul>
       <div style="clear:both;"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nunc porta euismod luctus. Curabitur vehicula scelerisque diam at vestibulum.     
Pellentesque in lacus et augue malesuad
    </div>
</div>

Когда я использую следующее, я могу обернуть изображения с помощью <li> и <ul>.

$("#system #product_cont img").wrapAll("<ul class=\"cont_thumb\">").wrap("<li>");

Но я не уверен, как добавить это после тега </ul> с помощью jquery:

<div style="clear:both;"></div> 

Я попробовал это, но это не сработало:

$("#system #product_cont img").wrapAll("<ul class=\"cont_thumb\">").wrap("<li>").after('<div style="clear:both;"></div>');

Answer 1

Если ваши <li> элементы плавающие, вы можете просто поместить это в свой CSS ( вместо , добавив, что <div>):

#cont_thumb { overflow: auto; }

Так что это будет учитывать их рост при расчете его собственного. Quirksmode.org содержит довольно хорошую статью об альтернативных подходах к очистке поплавков здесь . Также id="product_cont img" недопустимо, даже в HTML5, вы должны использовать идентификаторы, которые не содержат пробелов, чтобы избежать побочных эффектов и проблем с селектором CSS.

Отредактировано для комментариев: Если вы изменяете масштаб изображения и вам нужна полная очистка (и overflow: none также не соответствует требованиям), вы можете сделать это:

$("#system #product_cont img").wrapAll('<ul class="cont_thumb">').wrap('<li />')
                         .closest('ul').after('<div style="clear:both;"></div>');

Answer 2

$("#system #product_cont img").append('<div style="clear:both;'></div>") должно быть достаточно.