如何在JQuery中獲取不屬於任何其他容器的div的文本？

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

在類似的帖子上復制我自己的答案

此示例使用.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的子元素。 所以你只需要查詢第一個孩子。 不過不確定。 心連心

Answer 6

我認為正確的良好角度是將第一部分置於<p> </p> （如果跨度不合適）。

我以為我可以得到一個.filter來處理它，但是不能得到它...