Добрый день. Есть фрагмент:
<div class="modal-body">
текст
<h2>Заголовок 1</h2>
абзац
<h2>Заголовок 2</h2>
абзац
</div>
<div id="left-menu-result">
<ul class="sllft"></ul>
</div>
и js скрипт (извините, такая уж разметка)
jQuery(document).ready(function($) {
// к каждому элементу h2 добавляю id
var i=0;
$('.modal-dialog h2').each(function(){
i++;
$(this).attr('id', 'b_'+i);
});
// получаю все заголовки
var menu = $('.modal-body h2');
// вывожу заголовки в список
$('#left-menu-result ul').html(menu);
// меняю в сформированном списке h2 на span
$('#left-menu-result ul h2').replaceWith(function(index, oldHTML){
return $('<span class="sl_lt">').html(oldHTML);
});
// оборачиваю все строки в тег li
$('#left-menu-result span').wrap('<li></li>');
// перед закрывающим тегом li вставляем ссылку
$('#left-menu-result ul li').append('<a class="n_6" href="#b_6"></a>');
});
Объясните мне пожалуйста, почему все заголовки h2 исчезают из .modal-body?
Вообще в итоге должно получиться:
<div id="left-menu-result">
<ul class="sllft">
<li><span class="sl_lt">Заголовок 1</span><a class="n_6" href="#b_6"></a></li>
<li><span class="sl_lt">Заголовок 2</span><a class="n_6" href="#b_6"></a></li>
</ul>
</div>
Тестирую, вроде в $('#left-menu-result ul').html(menu); загвоздка
Спасибо