javascript - 如何使用 jQuery 选择元素的自己的文本

Question

我有以下 html:

<div>
    <div id="t1">Text1</div> 
    <div id="t2">
        Text2 
        <ul id="t3">
            <li id="t4">Text3</li>
        </ul>
    </div>
</div>

我想为每个元素选择仅自己的 文本。我尝试使用 jQuery text 函数，但它返回选择中所有元素的组合文本内容:

t1 => Text1
t2 => Text2 Text3
t3 => Text3
t4 => Text3

还有我需要的:

t1 => Text1
t2 => Text2
t3 =>
t4 => Text3 

Answer 1

$.fn.ownText = function() {
    return this.eq(0).contents().filter(function() {
       return this.nodeType === 3 // && $.trim(this.nodeValue).length;
    }).map(function() {
       return this.nodeValue;
    }).get().join('');
}

var text = $('#t2').ownText();

http://jsfiddle.net/5L9Ww/

稍微快一点的选择:

$.fn.ownText = function() {
    var children = this.get(0).childNodes, 
        l = children.length,
        a = [];
    for (var i = 0; i < l; i++) {
      if (children[i].nodeType === 3) 
          a.push(children[i].nodeValue);
    }
    return a.join('');
}

或者接受用于连接节点值的胶水和用于 trim 结果的选项的不同方法:

$.fn.ownText = function(o) {
    var opt = $.extend({ glue: "", trim: false }, o),
        children = this.get(0).childNodes, 
        l = children.length,
        a = [];
    for (var i = 0; i < l; i++) {
        if (children[i].nodeType === 3) {
          var val = children[i].nodeValue;
          a.push(opt.trim ? $.trim(val) : val);
        }
    }
    return a.join(opt.glue);
}

$('#t2').ownText({
    glue: ',',
    trim: true
});