Jquery заменить не работает

0

Использование JQuery 1.7.1

У меня два divs

<div class="highlightStart"></div>
{page content here}
<div class="highlightEnd"></div>

Они отображаются в источнике страницы. Но этот jquery, который я добавил в нижней части страницы, не работает:

<script type="text/javascript" id="makeHighlight">
   $(document).ready(function () {
     $("div.highlightStart").replaceWith("<section class='highlight'>");
     $("div.highlightEnd").replaceWith("</section>"); 
   });
</script>

Ошибок javascript, отображаемых в консоли браузера (Chrome). Просто ничего не заменяется.

  • 0
    Кажется, хорошо для меня. Это работает в других браузерах?
  • 0
    Шутки в сторону? Это кажется нормальным? Я не могу не чувствовать, что есть фундаментальное недоразумение между узлами элементов и строками.
Показать ещё 1 комментарий
Теги:
dom-manipulation
replacewith

3 ответа

1
Лучший ответ

Основываясь на помощи истервуда, использовали это как решение:

http://jsfiddle.net/H36UE/1/

С деревом HTML:

<div><div><div class="highlightStart">highlightStart</div></div></div>
<div>Outside<div>Content to Highlight</div>More</div>
<div>second</div>
<div>third</div>
<div><div><div class="highlightEnd">highlightEnd</div></div></div>

Этот Javascript:

$(document).ready(function () {
  $('.highlightStart').parent().parent().replaceWith("<div class='highlightStart'>");
  $('.highlightEnd').parent().parent().replaceWith("<div class='highlightEnd'>");
  $('.highlightStart').nextUntil('.highlightEnd').andSelf().wrapAll("<section class='highlight'>");

 $('.highlightStart, .highlightEnd').remove();
});
Поделиться
2

Прежде всего, я хочу, чтобы вы создали неправильную структуру DOM. Если ваш скрипт будет запущен, он будет выглядеть так:

<div class="highlightStart"><section></div>
{page content here}
<div class="highlightEnd"></section></div>

и это не хорошая структура, если вы хотите иметь:

<section>
{page content here}
</section>

Должно быть что-то вроде этого:

Ваш DOM:

<div id="content">
{page content here}
</div>

И в вашем скрипте:

$(document).ready(function () {
  content = $('#content').text();

  $('#content').html($('<section>').text(content));
});

Пожалуйста см. Myfiddle для справки

Поделиться
  • 0
    Уже обновлено спасибо!
  • 1
    Так намного красивее.
Показать ещё 1 комментарий
1

Метод replaceWith ожидает целые элементы, а не теги. Вам нужно будет обернуть содержимое вашей страницы новым элементом, а затем удалить два оригинальных div.

Обновление: это может закрыть вас:

$(document).ready(function () {
   $('.highlightStart').nextUntil('.highlightEnd').andSelf()
       .wrap('<section class="highlight"></section>');

    $('.highlightStart, .hightlightEnd').remove();
});

http://jsfiddle.net/isherwood/H36UE

Что-то немного с этим, но у меня нет времени. Удачи.

Поделиться
  • 0
    Спасибо за это Ишервуд! В документации JQuery говорится, что replaceWith может принимать строку HTML (а также элемент, массив или jquery). То, что я использую, похоже, соответствует определению строки HTML: api.jquery.com/Types/#htmlString .
  • 0
    Похоже, проблема заключается в том, что JQuery автоматически заполняет тег в элементе, поэтому вы не можете отдельно вставить начальный и конечный тег (кажется, он игнорирует конечный тег.) Однако это работает просто для вставки текста, как и ожидалось: jsfiddle.net/ rqrxv
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню