Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.06.2017, 13:54
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 403

Пропадают теги 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); загвоздка

Спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 26.06.2017, 14:08
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

исчезают потому что вы из заменяете на span
вот этой строкой
$('#left-menu-result ul h2').replaceWith(function(index, oldHTML){
		return $('<span class="sl_lt">').html(oldHTML);
	});
Ответить с цитированием
  #3 (permalink)  
Старый 26.06.2017, 14:12
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 403

А разве я не указываю, из какого контейнера менять h2?
Я чего-то запутался
Ответить с цитированием
  #4 (permalink)  
Старый 26.06.2017, 14:14
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от Янковиц Посмотреть сообщение
А разве я не указываю, из какого контейнера менять h2?
Я чего-то запутался
что на выходе нужно?
Ответить с цитированием
  #5 (permalink)  
Старый 26.06.2017, 14:14
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 403

Смотрю исходный код, нет ни span ни h2 в контейнере modal-body
Ответить с цитированием
  #6 (permalink)  
Старый 26.06.2017, 14:15
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 403

На выходе получается без замены:
<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>
Ответить с цитированием
  #7 (permalink)  
Старый 26.06.2017, 14:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Сообщение от Янковиц
Объясните мне пожалуйста, почему все заголовки h2
потому что ты их перенёс в строке 11 из modal-body в #left-menu-result ul а потом ещё удалил в строке 13
Ответить с цитированием
  #8 (permalink)  
Старый 26.06.2017, 14:20
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от Янковиц Посмотреть сообщение
На выходе получается без замены:
<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>

оно так и получается
Ответить с цитированием
  #9 (permalink)  
Старый 26.06.2017, 14:20
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 403

А как на jquery правильно не перенести а просто продублировать?
Ответить с цитированием
  #10 (permalink)  
Старый 26.06.2017, 14:22
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от Янковиц Посмотреть сообщение
А как на jquery правильно не перенести а просто продублировать?
вы умеете запутать.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выбранные теги select2 serrrgggeee Общие вопросы Javascript 0 15.05.2016 10:06
Удалить теги из текста alerzo Events/DOM/Window 32 18.03.2014 13:50
Удалить все HTML теги из <META> Mukhtar Events/DOM/Window 4 13.06.2013 19:44
Jquery .html() вырезает теги ART-DELI jQuery 7 18.04.2011 11:49
Как текст из responseText преобразовать в теги? Бобр AJAX и COMET 24 26.02.2010 04:37