javascript - 仅当元素的第一个子元素之前没有文本节点时，如何匹配它？

Question

我正在尝试匹配 div 的 h4（使用 jQuery），以便我可以删除它的上边距。但是，如果 h4 上面没有文本，我只想匹配它。例如，匹配这个：

<div>
  <h4>Header</h4>
  ...
</div>

但不是这个：

<div>
  Blah blah blah.
  <h4>Header</h4>
  ...
</div>

我在 jQuery 中能想到的最好的代码是这样的：

$("div h4:first-child")

但不幸的是，这与上述两种情况都匹配。无论如何指定您希望它是绝对的第一个元素，之前没有文本节点？

Answer 1

<div>
    <h4>Header</h4>
    ...
</div>

<div>
    Blah blah blah.
    <h4>Header</h4>
    ...
</div>

那么您可以使用以下内容。

$('div').each(function() {
    var me = this;
    if ($(me).html().toUpperCase().indexOf("<H4>") == 0){ //check to see if the inner html starts with an h4 tag
        $(me).children('h4')... //do what you need to do to the header
    }
});

Answer 2

$("div h4")
    .filter(function() {
    var prev = this.previousSibling;
        return (!prev 
            || prev.nodeType !== 3
            || (prev.nodeType == 3 && prev.nodeValue.match(/^\s*$/)));
    })

编辑：修复它。适用于 Firefox、IE8

笔记：

1. 过滤器函数中的“this”指的是节点
2. 两个 H4 前面都有一个文本节点。我认为浏览器会在发现空格和换行符的任何地方插入文本节点。在这种情况下，我们只选择那些不是纯空格的。
3. Node.TEXT_NODE在 IE 中不可用。因此使用幻数 3。