Как запретить replaceWith создавать множественные текстовые узлы? - PullRequest
Новая
       5

Как запретить replaceWith создавать множественные текстовые узлы?

3 голосов
/ 21 января 2011

У меня есть этот HTML-код: 

<p><span>h</span><span>o</span><span>l</span><span>a</span></p>

И я использую jQuery для замены всех промежутков: 

$('p span').each(function(){
   $(this).replaceWith($(this).text());     
});

Когда я заглядываю в свой DOMЯ вижу скрипт, созданный 4 текстовых узла , для каждой буквы один. Как я могу предотвратить это? Мне нужен только 1 текстовый узел!

Примечание: данный пример очень очень упрощен.На самом деле я делаю это на: 

<p>This is an <b>example</b>: <span>h</span><span>o</span><span>l</span><span>a</span>!</p>

Это должно выглядеть так: 

<p>{text}This is an {/text}<b>{text}example{/text}</b>{text}: hola!{/text}</p>

{текст} - это DOM-текстовый узел: -)

Ответы [ 2 ]

2 голосов
/ 21 января 2011

Одна вещь, которую вы могли бы сделать, это в конце вызвать метод normalize(): 

$('p').find('span').each(function(){
   $(this).replaceWith($(this).text());     
}).end()[0].normalize();

РЕДАКТИРОВАТЬ: Я ранее использовал parent() (документы) , чтобы пройти вверх от <span> элементов, но они были удалены из DOM, поэтому у них больше нет родителя.

Вместо этого теперь я сначала выбираю <p>, затем find() (документы) <span> элементов.Таким образом, я могу использовать end() (документы) , чтобы вернуться к <p>, и позвонить .normalize().

Если имеется несколько <p> элементов, вам нужно сделать еще один цикл. 

$('p').find('span').each(function(){
   $(this).replaceWith($(this).text());     
}).end().each(function() {
    this.normalize();
});

Вы также можете передать функцию в качестве параметра replaceWith() (документы) , который возвращает текст каждого элемента. 

$('p').find('span').replaceWith(function(i,el){ 
    return $.text([this]);
}).end().each(function() {
    this.normalize();
});
1 голос
/ 21 января 2011

Возможно, вы действительно этого хотите? 

$('p').text(function (i, txt) {
    return txt;
});

В действии: http://jsfiddle.net/2qNGY/

...