Переместить закрывающий тег </a> в конец содержащего элемента
Я пытаюсь получить ссылку для обтекания всего текста в div. Я могу найти решения только тогда, когда вы полностью перемещаете определенные элементы DOM или перемещаете другие элементы в элемент.
текущая ситуация:
<div class = "text">
<a href = "link">text</a> and more text
</div>
желаемая ситуация:
<div class = "text">
<a href = "link">text and more text</a>
</div>
К сожалению, я не могу изменить разметку, поэтому мне приходится что-то делать с jQuery.
Возможно ли разместить два <a> в одном div? Что должно произойти в таком случае? Я заметил, что ни один из ответов не учитывает нескольких братьев и сестер, и единственное предлагаемое исправление (while (this.nextSibling)) в конечном итоге приведет к вложению одноуровневых <a>.
Вы хотите, чтобы в </a> были добавлены только текстовые узлы, следующие за вашим <a>? Что будет, если есть другие элементы? Изменится ли это в зависимости от типа элемента (например, хотите ли вы сделать что-то другое с <b> по сравнению с <div>)? Что, если дополнительные элементы имеют действия щелчка по умолчанию (например, другой <a>)? Вы хотите сохранить какие-либо существующие прослушиватели событий и / или ссылки на перемещаемые узлы?
Вы уверены, что тег a является firstElementChilddiv? Ваша цель - изменить DOM или просто сделать весь div интерактивным? И, самое главное, что вы на самом деле пробовали до сих пор?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Сначала вы можете получить HTML-код внутри div с классом text, а затем заменить закрывающий тег </a> на '', а затем, наконец, добавить закрывающий тег </a> к замененной строке, чтобы получить то, что вы ожидаете:
var aHTML = $('.text').html();
aHTML = aHTML.trim().replace(/</a>/, '') + '</a>';
$('.text').html(aHTML);<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "text">
<a href = "link">text</a> and more text
</div>Вам нужно использовать .append( function ), чтобы вставить в него nextSibling привязки.
$(".text a").append(function(){
return this.nextSibling
});
$(".text a").append(function(){
return this.nextSibling
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "text">
<a href = "link">text</a> and more text
</div>Также вы можете использовать .html( function ) вместо этого, а затем удалить следующего брата с помощью .remove()
$(".text a").html(function(i, h){
return h + this.nextSibling.nodeValue;
})[0].nextSibling.remove();
Или в одна линия используя ES6
$(".text a").html((i,h) => h+this.nextSibling.nodeValue)[0].nextSibling.remove();
$(".text a").html(function(i, h){
return h + this.nextSibling.nodeValue;
})[0].nextSibling.remove();<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "text">
<a href = "link">text</a> and more text
</div>Или используя чистый javascript
var ele = document.querySelector(".text a");
ele.innerHTML += ele.nextSibling.nodeValue;
ele.nextSibling.remove();
var ele = document.querySelector(".text a");
ele.innerHTML += ele.nextSibling.nodeValue;
ele.nextSibling.remove();<div class = "text">
<a href = "link">text</a> and more text
</div>Близко, но innerHTML лучше не перезаписывать.
Зачем помещать этот оператор присваивания в строку return, если он не имеет ничего общего с return, за которым следует запятая, а затем фактическое возвращаемое значение? Плохой и запутанный стиль, если вы спросите меня.
@PeterB Он возвращает h+text из-за оператора запятой. Но вы правы, разбивать две строки кода в одну с помощью запятой - не лучший стиль.
Поскольку вы изменяете innerHTML / .html() напрямую, это отключит все прослушиватели событий, которые есть в существующем контенте, и сделает недействительными любые ссылки на существующий контент. Это может нарушить функциональность страницы и / или привести к сбою другого JavaScript и / или возникновению исключений. Если вы не знать, что изменение innerHTML / .html() допустимо, этого следует избегать, когда это возможно / разумно.
Избегайте возиться с html напрямую, лучше не менять и не перезаписывать. Все, что вам нужно сделать, это взять следующий текстовый родственный узел Node и добавить его к предыдущему a:
$('.text a').each(function() {
$(this).append(this.nextSibling)
})<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "text">
<a href = "link">text</a> and more text
</div>При необходимости вы можете проверить, является ли следующий узел TextNode, если вам нужно пропустить узлы элементов:
if (this.nextSibling.nodeType === 3) {
$(this).append(this.nextSibling)
}
Для полноты картины понадобится шлейф while(node.nextSibling) ....
HTML / JavaScript не работает таким образом, чтобы вы могли «переместить» закрывающий тег подобным образом, но вы можете переместить текст. Кроме того, для этого вам не нужен jQuery; это очень просто сделать с ванильным JavaScript:
let link = document.querySelector('.text a')
let textAfterLink = link.nextSibling
link.appendChild(textAfterLink)<div class = "text">
<a href = "link">text</a> and more text
</div>Здесь у вас есть один подход, который найдет весь текст развернутый внутри элемента с классом .text и присоединит все эти тексты к первому дочернему элементу <a>. В этом подходе используется метод содержание(), связанный с фильтр(), с использованием условия addequated для удаления дочерних текстов, в то же время они добавляются к элементу <a>.
$('.text').each(function()
{
$(this).contents().filter(function()
{
// Filter text type only.
return (this.nodeType === 3);
})
.appendTo($(this).find("a:first-child"));
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "text">
<a href = "link">text</a> and more text
</div>
<hr>
<div class = "text">
<a href = "link">Rise up this morning</a>
Smile with the rising sun
<br>
Three little birds
<br>
Pitched by my doorstep
<br>
<p>DON'T TOUCH THIS ONE!</p>
Singing sweet songs
<br>
Of melodies pure and true
<br>
Sayin': This is my message to you
<br>
Saying, don't worry about a thing
<br>
'Cause every little thing
<br>
Gonna be all right
</div>
Вы заботитесь о пробеле между
</a>и</div>?