Question

我在jquery对象中有一段html。当我说$（this）.html（）时，我得到：

<span class="value">4</span><span class="type">teaspoons</span>butter

我想只从这个html片段中获取不在跨度中的文本片段。在这个例子中，它是黄油。

我如何得到它？

谢谢！

Answer 1

这是一种容易但又作弊的方式，放弃所有孩子并获得文本属性

var tmp = $(".post-text").clone();
tmp.children().remove();
tmp.text();

编辑此外还有一个Text Children plugin。

Answer 2

var textvalues = $(this).contents().map(function() {
  return this.nodeType === 3 ? this.nodeValue : null;
});

Answer 3

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

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

// our 'div' that contains your code:
var $html = $('<div><span class="value">4</span><span class="type">teaspoons</span>butter</div>');

// 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 : ''; 
  // get the array, and join it together:
}).get().join('');

// "butter"

如果您需要做很多事情，可以快速插件：

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

或者更强大的版本，支持剥离空格/更改它与结果数组连接的文本：

$.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: ''
};

获取封装在jquery对象中的html元素的直接内容

3 个答案: