parentnode - removechild javascript

¿Cómo hacer coincidir el primer hijo de un elemento solo si no está precedido por un nodo de texto?

Question

Estoy intentando hacer coincidir el h4 de un div (usando jQuery) para poder eliminar su margen superior. Sin embargo, solo quiero hacer coincidir el h4 si no tiene texto encima. Por ejemplo, haga coincidir esto:

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

pero no esto:

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

El mejor código que pude encontrar en jQuery es este:

$("div h4:first-child")

Pero eso, lamentablemente, coincide con los dos casos anteriores. ¿Hay alguna forma de especificar que quieres que sea el primer elemento absoluto, sin ningún nodo de texto antes?

Answer 1

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

Editar: se corrigió. Funciona en Firefox, IE8

Notas:

1. ''this'' dentro de la función de filtro se refiere al nodo
2. ambos H4 tienen un nodo de texto antes que ellos. Creo que los navegadores insertan nodos de texto en cualquier lugar donde encuentren espacios en blanco y salto de línea. En este caso, seleccionamos solo aquellos que no son solo espacio en blanco.
3. Node.TEXT_NODE no está disponible en IE. Por lo tanto, utilizando el número mágico 3.

Answer 2

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

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

entonces podrías usar lo siguiente.

$(''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
    }
});