2

我希望能够识别文本字符串的第一个子元素何时是元素或文本节点，例如：

我正在考虑这样做：$('<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

如何检测元素中的第一个项目是文本还是元素？

4

4 回答 4

4

我建议使用一些普通的 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”，请记住将其添加到函数返回的值中。

还值得记住的是，一些（尽管我不认为全部）浏览器确实将打开标签之间的空白（换行符和制表符）报告为文本节点，因此您完全有可能必须修剪白色-space 在评估 的firstChild节点类型之前。

参考：

于 2012-12-29T23:43:52.663 回答
1 
$('....').get(0).nodeType == 3 // first node is a text node

类似的东西？用于.get()获取 DOM 元素，并检查nodeType.

于 2012-12-29T23:41:52.370 回答
1

天真的方式：

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

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

于 2012-12-30T00:20:19.183 回答
0

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

于 2012-12-29T23:43:00.643 回答