Question

我正在尝试获取一个链接来包装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。

Answer 1

避免直接弄乱html，最好不要对其进行更改或覆盖。您需要做的就是获取下一个文本同级节点，并将其附加到上一个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)
}

Answer 2

您需要使用.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>

Answer 3

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>

Answer 4

您可以首先在div内获得类text内的HTML，然后将结束标记</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>

Answer 5

在这里，您有一种方法可以在元素内找到类为.text的所有未包装文本，并将所有这些文本附加到第一个<a>子级。这种方法使用content()方法与filter()链接，并使用附加条件删除文本子项，同时将它们附加到<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>

将结束标记移动到包含元素的末尾

5 个答案: