jQuery：选择相邻的标签，除非被文本分隔

Question

我正在尝试查找并合并段落内相邻的 em 标签，但事实证明这比我预期的要困难。考虑以下示例：

<p><em>Hello</em><em> World</em></p>

<p><em>Hello</em> <em>World</em></p>

<p><em>Hello</em> to the <em>World</em></p>

在上面的第一个和第二个示例中，我希望 $("em + em") 正确 select 第二个 em 标记。让我没想到的是，它还会 select 像第三个例子中的文本出现在它们之间的情况。

有没有办法检测这些标签之间的文本并区别对待它们？

Answer 1

What I didn't expect was that it would also select cases like the third example where text appears between them.

相邻兄弟组合器 + 不考虑文本。它只是 select 紧随其后的兄弟元素。

您可以根据前一个兄弟元素是元素还是空格来过滤所有相邻的 em 元素，如果标签之间出现文本则排除该元素。

在下面的示例中，第三个 p 中的 em 未被 select 编辑，因为前一个节点是文本。

var $previousSiblings = $('em + em').filter(function () {
   var prev = this.previousSibling;
   return prev.nodeType === 1 ? true : !prev.nodeValue.trim();
});

$previousSiblings.css('color', '#f00');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><em>Hello</em><em> World</em></p>
<p><em>Hello</em> <em>World</em></p>
<p><em>Hello</em> to the <em>World</em></p>

如果需要，您还可以创建自定义 jQuery 方法。

例如，这是一个自定义 .nextWithoutText() 方法，如果元素之间没有文本，它将 select 提供下一个元素。

用法：$('em').nextWithoutText('em')：

$.fn.nextWithoutText = function(tag) {
  return $('+' + tag, this).filter(function() {
    var prev = this.previousSibling;
    return prev.nodeType === 1 ? true : !prev.nodeValue.trim();
  });
};

$('em').nextWithoutText('em').css('color', '#f00');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><em>Hello</em><em> World</em></p>
<p><em>Hello</em> <em>World</em></p>
<p><em>Hello</em> to the <em>World</em></p>

jQuery：选择相邻的标签，除非被文本分隔

jQuery: Selecting adjacent tags unless separated by text

html

javascript

jquery

traversal