Question

这应该很容易。以下是HTML。

<div id='attachmentContainer'>
    #Attachment#
    <span id='spnAttachmentName' class='hidden'>#AttachmentName#</span>
    <span id='spnAttachmentPath' class='hidden'>#AttachmentPath#</span>
</div>

我想获得＃Attachment＃而不是其他文本。我试过的时候

$("#attachmentContainer").text()

它提供了所有＃Attachment＃，＃AttachmentName＃以及＃AttachmentPath＃。我知道我可以把#Attachment＃放到另一个跨度中并直接访问它但我只是对如何做到这一点很感兴趣。非常感谢任何帮助。

Answer 1

由于您的文本恰好是<div>的第一个子节点：

var firstChild = $("#attachmentContainer")[0].firstChild;
var textValue  = firstChild.nodeType == 3 ? $.trim(firstChild.nodeValue) : "";

nodeType检查是一种安全措施 - 它确保您实际处理文本节点 - firstChild可能会有所不同。相应的反应，这只是一个例子。

要检索所有文本子项（或特定子项）的值，只需遍历元素的childNodes集合，将找到的所有位连接成一个字符串：

// the optional "at" parameter lets you define which text node you want
// if not given, this returns all text nodes concatenated
$.fn.ownText = function(at) { 
  var result = [], node = this[0];
  if (!(node && node.childNodes)) return;
  for (var i=0; i<node.childNodes.length; i++) {
    var child = node.childNodes[i];
    if (child.nodeType != 3) continue;
    var t = $.trim(child.nodeValue);
    if (t != '') result.push(t);
  }
  return at ? result[at-1] : result.join(' ');
}

var text = $("#attachmentContainer").ownText();  // all text children
var text = $("#attachmentContainer").ownText(1); // first text child only

Answer 2

这将为您提供项目文本

var $item = $("#attachmentContainer").clone();
$item.children().remove(); 
alert($item.text());

克隆对象，这样您就不必删除实际的子项。然后你可以删除子元素，这将留下你想要的项目的innerText。

这是一个方便的小方法，很容易做到这一点

jQuery.fn.trueText = function(obj){
    var $item = $(obj).clone();
    $item.children().remove(); 
    return $item.text();
};

现在您可以致电$("#attachmentContainer").trueText()

Answer 3

$（'＃attachmentContainer'）。contents（）。filter（function（）{return this.nodeType == 3;}）。text（）

Answer 4

从my own answer on a similar thread
复制

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

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

// our 'div' that contains your code:
var $html = $("<div id='attachmentContainer'>\n    #Attachment#\n    <span id='spnAttachmentName' class='hidden'>#AttachmentName#</span>\n    <span id='spnAttachmentPath' class='hidden'>#AttachmentPath#</span>\n</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('');

// " 
//     #Attachment# 
//     
//     
// "

如果要修剪额外的空格，可以使用$.trim(this.nodeValue)

如果你需要做很多事情，你甚至可以制作一个插件（现在有一些选项）：

$.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 5

我认为文本实际上是一个文本元素 - 父div的子元素。所以你只需要查询第一个孩子。不过不确定。 HTH

Answer 6

我认为正确的良好角度是将第一部分置于<p> </p>（如果跨度不合适）。

我以为我可以得到一个.filter来处理它，但是不能完全得到它......

如何在JQuery中获取不属于任何其他容器的div的文本？

6 个答案: