JQuery replaceWith не работает

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

У меня два див

<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>

В консоли браузера (Chrome) не отображаются ошибки JavaScript. Просто ничего не заменяется.


javascript jquery dom-manipulation replacewith
person Conando    schedule 21.10.2013    source источник
comment
Мне кажется, это нормально. Это работает в других браузерах?   -  person Drixson Oseña    schedule 22.10.2013
comment
Шутки в сторону? Кажется, это нормально? Я не могу не чувствовать, что существует фундаментальное непонимание между узлами элементов и строками.   -  person David says reinstate Monica    schedule 22.10.2013
comment
Можете ли вы начать с div вокруг содержимого страницы, которое является родственником двух других? Это сделало бы жизнь проще.   -  person isherwood    schedule 22.10.2013

Ответы (3)


arrow_upward
3
arrow_downward

Сначала я хочу указать, что вы создаете неправильную структуру 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.

person Drixson Oseña    schedule 21.10.2013
comment
Насколько я понимаю, то, что вы описываете, предназначено для html (), а не для replaceWith (); html () заменяет содержимое между тегами; replaceWith заменяет элементы. Вот сообщение StackOverflow, которое я получил от: stackoverflow.com/questions/730916/ - person Conando; 22.10.2013

arrow_upward
1
arrow_downward

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

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

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

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

http://jsfiddle.net/isherwood/H36UE

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

person isherwood    schedule 21.10.2013
comment
Спасибо за это, Ишервуд! В документации JQuery сказано, что replaceWith может принимать строку HTML (а также элемент, массив или jquery). То, что я использую, похоже, соответствует определению строки HTML: api.jquery.com/Types/ #htmlString. - person Conando; 22.10.2013
comment
Проблема, похоже, заключается в том, что JQuery автоматически заполняет тег в элемент, поэтому вы не можете отдельно вставлять начальный и конечный тег (кажется, что конечный тег игнорируется). Однако это работает, чтобы просто вставить текст, как ожидалось: jsfiddle.net/rqrxv - person Conando; 23.10.2013
comment
Хорошо знать. Спасибо. - person isherwood; 23.10.2013
comment
Это то, что я в конечном итоге использовал, внимательно следуя вашему примеру. В примере HTML больше показана структура дерева на сайте клиента: jsfiddle.net/H36UE/1. Большое спасибо за помощь! - person Conando; 24.10.2013

arrow_upward
1
arrow_downward

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

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();
});
person Conando    schedule 24.10.2013