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>

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

1 个答案: