Как получить текст div, который не является частью какого-либо другого контейнера в JQuery?

Question

Это должно быть очень легко. Ниже приведен HTML.

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

Я хочу получить только # Приложение #, а не другой текст. Когда я пытался

$("#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());

клонируйте объект, чтобы вам не пришлось удалять фактические элементы потомков. Затем вы можете удалить дочерние элементы, и это оставит внутренний текст нужного вам элемента.

А вот небольшой удобный способ сделать это легко

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

Я думаю, что правильным правильно сформированным углом было бы поместить эту первую часть в <p> </p> (если диапазон не подходит).

Я думал, что смогу получить фильтр для работы с ним, но не смог его получить ...

Answer 6

Я думаю, что текст на самом деле является текстовым элементом - потомком родительского элемента div. Так что вам просто нужно запросить первого ребенка. Не уверен, хотя. НТН