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")正确选择第二个em标签。我没想到的是，它还会选择像第三个示例这样的情况，其中文本出现在它们之间。

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

Answer 1

我没想到的是，它还会选择像第三个示例这样的情况，其中文本出现在它们之间。

相邻同级组合器+不考虑文本。它只会选择紧随其后的同级元素。

您可以em根据前一个同级元素是元素还是空格来过滤所有相邻元素，并在标签之间出现文本时排除该元素。

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

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()方法，如果元素之间没有文本，它将选择提供的下一个元素。

用法：$('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>