Пропадают теги h2
Добрый день. Есть фрагмент:
<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); загвоздка Спасибо |
исчезают потому что вы из заменяете на span
вот этой строкой
$('#left-menu-result ul h2').replaceWith(function(index, oldHTML){
return $('<span class="sl_lt">').html(oldHTML);
});
|
А разве я не указываю, из какого контейнера менять h2?
Я чего-то запутался |
Цитата:
|
Смотрю исходный код, нет ни span ни h2 в контейнере modal-body
|
На выходе получается без замены:
<div id="left-menu-result"> <ul class="sllft"> <li><h2>Заголовок 1</h2><a class="n_6" href="#b_6"></a></li> <li><h2>Заголовок 2</h2><a class="n_6" href="#b_6"></a></li> </ul> </div> а нужно: <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> |
Цитата:
|
Цитата:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="modal-body">
текст
<h2>Заголовок 1</h2>
абзац
<h2>Заголовок 2</h2>
абзац
</div>
<div id="left-menu-result">
<ul class="sllft"></ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
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>');
});
</script>
</body>
</html>
оно так и получается |
А как на jquery правильно не перенести а просто продублировать?
|
Цитата:
|
Прошу прощения. То есть, мне нужно не перенести h2 в блок #left-menu-result, как об это говорил Рони, а просто продублировать заголовки в него.
|
Я так понимаю
$('#left-menu-result ul').html(menu); Это я просто переношу заголовки из одного места в другой? |
Цитата:
нужно типа
$('#left-menu-result ul').html(menu.clone());
|
или так
var menu = $('.modal-body h2').clone();
|
Янковиц,
modal-dialog это что? |
Круто!! Все заработало.
|
я перепутал, вернее modal-body
|
Янковиц,
зачем 2 цикла, если можно в одном...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$('.modal-body h2').each(function(i,el){
$(this).attr('id', 'b_'+(i+1));
var li = $("<li/>", {html : $('<span class="sl_lt">').html(this.innerHTML)})
.append('<a class="n_6" href="#b_6"></a>');
$('#left-menu-result ul').append(li)
});
});
</script>
</head>
<body>
<div class="modal-body">
текст
<h2>Заголовок 1</h2>
абзац
<h2>Заголовок 2</h2>
абзац
</div>
<div id="left-menu-result">
<ul class="sllft"></ul>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 14:00. |