如何获取不属于子元素的容器内的文本

Question

我们有这样的HTML代码：

<div id="d1"><span>1.</span>Hallo <span>Kitty, </span><div>How are you?</div></div>

这只是一个例子，里面可能有不同的子元素。

如何在d1容器中获取不属于子元素的文本？

对于上面的示例，它只是"Hallo "

Answer 1

这对你有用

$('#d1')
  .contents()
  .filter(function() {
    return this.nodeType == Node.TEXT_NODE;
}).text()

或者你也可以按照下面的建议使用它来支持旧的浏览器支持

var text = $("#d1").contents().filter( function() {
    return this.nodeType === 3;
}).text();

Demo

Answer 2

http://jsfiddle.net/SGZW4/

var text = $("#d1").contents().filter( function() {
    return this.nodeType === 3;
}).text();

Answer 3

改进halex的技巧，你可以利用.children()只找到DOM节点并忽略文本节点的事实：

var text = $('#d1').clone().children().remove().end().text(); // string "Hallo "

...但我更喜欢.nodeType技术，因为它更清楚你在做什么。