Question

我想知道如何获取嵌套列表项的文本而不获取其子项的文本，即

<ul>
   <li id="node">
      I want this
    <ul>
       <li>
          I dont want this
        </li>
    </ul>
    </li>
</ul>

现在使用jquery和$（'＃node'）。text（）获取所有文本，我只想要“我想要这个”字符串。

任何帮助表示赞赏。

干杯，克里斯。

Answer 1

蒂姆的解决方案将起作用。如果您的标记始终以该格式固定，并且您只需要阅读第一段文本直到子元素，您甚至可以完全逃脱：

node.firstChild.data

Answer 2

以下内容将为您提供所有文本节点的连接字符串，这些节点是节点的直接子节点：

function getChildText(node) {
  var text = "";
  for (var child = node.firstChild; !!child; child = child.nextSibling) {
    if (child.nodeType === 3) {
      text += child.nodeValue;
    }
  }
  return text;
}

alert( getChildText(document.getElementById("node")) );

Answer 3

此示例使用.contents()获取所有子节点（包括文本节点），然后使用.map()将每个子节点转换为基于nodeType的字符串。如果节点是文本节点（即文本不在<li>内），我们将返回其nodeValue。

这将返回一个包含字符串的jQuery集，因此我们调用.get()来获取一个'标准'数组对象，我们可以调用.join()。

// our 'div' that contains your code:
var $html = $('<li id="node">I want this<ul><li>I dont want this</li></ul>    </li>');

// Map the contents() into strings
$html.contents().map(function() { 
  // if the node is a textNode, use its nodeValue, otherwise empty string
  return this.nodeType == 3 ? this.nodeValue : undefined; 
  // get the array, and join it together:
}).get().join('');

// "I want this    " -- note the extra whitespace from after the <ul>

要做一个更简单的电话：

$.fn.directText=function(delim) {
  if (!delim) delim = '';
  return this.contents().map(function() { return this.nodeType == 3 ? this.nodeValue : undefined}).get().join(delim);
};

$html.directText();
// "I want this    "

或者更强大的版本，允许修剪空格/更改连接字符串：

$.fn.directText = function(settings) {
   settings = $.extend({},$.fn.directText.defaults, settings);
   return this.contents().map(function() {
     if (this.nodeType != 3) return undefined; // remove non-text nodes
     var value = this.nodeValue;
     if (settings.trim) value = $.trim(value);
     if (!value.length) return undefined; // remove zero-length text nodes
     return value;
   }).get().join(settings.joinText);
};

$.fn.directText.defaults = {
   trim: true,
   joinText: ''
};

Answer 4

如果这是你想要经常做的事，那就有Text Children Plugin。它还为您提供了一些输出选项。

JQuery InnerText不包括子元素

4 个答案: