Javascript-форум - Видоизменение содержимого контейнеров

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Видоизменение содержимого контейнеров (https://javascript.ru/forum/jquery/1928-vidoizmenenie-soderzhimogo-kontejjnerov.html)

Видоизменение содержимого контейнеров

Доброго времени суток
По запросу "jquery форум" ,этот форум оказался на первом месте в поисковике, поэтому решил обратиться к вам...
Надеюсь не откажите в помощи.
Нужно видоизменить содержимое контейнера примерно так:

До:

<div class="box">
    <div class="title">Заголовок</div>
        <div class="txt">текст</div>
</div>

После:

<div class="box">
  <div class='white-box'>
    <div class="title">Заголовок</div>
        <hr class='line'/>
            <div class="txt">текст</div>
  </div>
</div>

При помощи jquery сделал простую замену тегов:

$("div .box").ready(function(){
 boxheader = ("<div class='box'><div class='white-box'>");
 boxfooter = ("</div></div>");
 boxtitle = $('div.title').html();
 boxtext = $("div.txt").html();
 hr = ("<hr class='line'/>");
$("div.box").replaceWith(boxheader+boxtitle+hr+boxtext+boxfooter);
 });

И вроде бы все хорошо, но затея состоит в том, что контейнеров с классом "box" будет много..

когда их на странице больше одного, то содержимое тегов с классами "title" и "txt" идет из "title" и "txt" -первого обработаного контейнера "box"

Помогите заставить jquery обрабатывать каждый контейнер отдельно, а не смешивать все в кучу.
Буду вам очень благодарен. Заранее спасибо.

jQuery 1.2.6

$('.box').wrapInner('<div class="white-box"></div>');

Цитата:

Сообщение от Octane (Сообщение 6765)

jQuery 1.2.6

$('.box').wrapInner('<div class="white-box"></div>');

Мысль про заворачивание была ранее, но дело в том, что тут div class="white-box" приведен как просто легкий пример, не отвлекающий от основной мысли...
На самом деле все это нужно завернуть в

<table >
		    <tr>
			    <td class="tlv"></td>
			    <td class="tcv"></td>
			    <td class="trv"></td>
		    </tr>
		    <tr>
			    <td class="tlc"></td>
			    <td>





                                      </td>
			    <td class="trc"></td>
		    </tr>
		    <tr>
			    <td  class="tln"></td>
			    <td  class="tcn"></td>
			    <td  class="trn"></td>
		    </tr>
	    </table>

поэтому я посчитал что будет проще

boxheader = ("<table><tr><td class='tlv'></td><td class='tcv'></td><td class='trv'></td></tr><tr><td class='tlc'></td><td>");
 boxfooter = ("</td><td class='trc'></td></tr><tr><td class='tln'></td><td class='tcn'></td><td class='trn'></td></tr></table>");
$("div.box").replaceWith(boxheader+boxtitle+hr+boxtext+boxfooter);

Ну и в чем проблема, сложите innerHTML

$('.box').each(function() {
  this.html('<table>…' + this.html() + '…</table>');
});