jquery - jquery - ノードが要素かテキストかを確認するにはどうすればよいですか

Question

テキスト文字列の最初の子が要素またはテキストノードである場合を識別できるようにしたいので、たとえば：

私はやろうと思っていました：$('<span>'+my_html_string+'</span>').children().is('*')

しかし、これは常に機能するとは限りません。

1: 最初の子はテキストです。いくつかの例：

<span>some text<span> //works using above code
<div>here is some <span>text</span></div> //fails using above code
<pre>check out my text</pre> //works

2: 最初の子は任意の要素です。例:

<div><span>I am an element</span></div> //works
<span><div>first child div</div>understand?</span> //works

要素内の最初の項目がテキストか要素かを検出するにはどうすればよいですか?

Answer 1

単純な JavaScript を使用することをお勧めします (ただし、関連するノード/要素を反復処理するために jQuery と組み合わせます)。以下はテストされていませんが、要点を理解していると思います。

function firstChildIs(el) {
    if (!el) {
        return false;
    }
    else {
        switch (el.firstChild.nodeType) {
            case 1:
            return 'Element is an element';
            break;
            case 2:
            return 'Element is an attribute node';
            break;
            case 3:
            return 'Element is a textNode';
            break;
            case 4:
            return 'Element is a CDATA section node';
            break;
            case 5:
            return 'Entity reference node';
            break;
            case 6:
            return 'entity node';
            break;
            case 7:
            return 'processing instruction node';
            break;
            case 8:
            return 'comment node';
            break;
            case 9:
            return 'document node';
            break;
            case 10:
            return 'document type node';
            break;
            case 11:
            return 'document fragment node';
            break;
            case 12:
            return 'document notation node';
            break;
            default:
            return 'Something horrible has probably happened...';
            break;
        }
    }
}

そして、次のように呼び出します。

$(elementSelector).each(
    function(){
        console.log(firstChildIs(this));
    });

スイッチを使用するよりも配列を使用する方が簡単かもしれないと思ったので編集しました：

function firstChildIs(el) {
    if (!el) {
        return false;
    }
    else {
        var nodetypes = ['element', 'attribute', 'text',
                         'CDATA section', 'entity reference',
                         'entity', 'processing instruction',
                         'comment', 'document', 'document type',
                         'document fragment', 'document notation'];
        return nodetypes[el.firstChild.nodeType - 1] || 'something really unexpected happened';
    }
}

前に示したのと同じ方法で呼び出します。「node」という単語を追加する場合は、関数によって返される値に忘れずに追加してください。

一部の (すべてではないと思いますが) ブラウザーは、開始タグ間の空白 (改行とタブ) をテキストノードとして報告することも覚えておく価値があります。 firstChild- の node-typeを評価する前のスペース。

参考文献:

• Node.nodeType.

Answer 2

素朴な方法：

$(my_html_string).html().substr(0,1) == '<'

jQuery.trim()最終的な空白を取り除くために使用することを検討してください。

Answer 3

$('....').get(0).nodeType == 3 // first node is a text node

そんな感じ？を使用.get()して DOM 要素を取得し、 に対してチェックしnodeTypeます。

Answer 4

これを試して：$("element_selector:first-child")[0].nodeType == 3