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.nodeType。

Answer 2

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

那样的东西？使用.get()获取DOM元素，并检查nodeType。

Answer 3

天真的方式：

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

考虑使用jQuery.trim()来摆脱最终的空白。

Answer 4

试试这个：$("element_selector:first-child")[0].nodeType == 3

jquery - 如何检查节点是元素还是文本

4 个答案: