получение прямого содержимого html-элемента, инкапсулированного в объект jquery

Question

У меня есть кусок HTML в объекте jquery. Когда я говорю $ (this) .html (), я получаю:

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

Я хочу получить только фрагмент текста из этого сегмента html, которого нет в пролетах. в этом примере это масло.

Как мне это получить?

Спасибо!

Answer 1

Есть простой, но обманчивый способ, отбросьте всех детей и получите свойство text

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

РЕДАКТИРОВАТЬ Существует также плагин Text Children , который делает это.

Answer 2

В этом примере используется .contents() для получения всех дочерних узлов (включая текстовые узлы), затем используется .map() для преобразования каждого дочернего узла в строку на основе nodeType. Если узел является текстовым узлом (т. Е. Текстом, не входящим в промежутки), мы возвращаем его nodeValue.

Возвращает набор jQuery, содержащий строки, поэтому мы вызываем .get(), чтобы получить «стандартный» объект массива, который мы можем назвать .join() on.

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

Answer 3

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