Как сопоставить первый дочерний элемент, только если ему не предшествует текстовый узел?

Question

Я пытаюсь соответствовать h4 div (используя jQuery), чтобы я мог удалить его верхнее поле. Тем не менее, я хочу соответствовать h4, только если на нем нет текста. Например, сопоставьте это:

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

но не это:

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

Лучший код, который я мог бы придумать в jQuery, это:

$("div h4:first-child")

Но это, к сожалению, соответствует обоим вышеупомянутым случаям. Можно ли в любом случае указать, что вы хотите, чтобы это был абсолютный первый элемент, без текстовых узлов до него?

Answer 1

$("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.

Answer 2

<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
    }
});