javascript / jquery :: получить текстовое значение?

Question

У меня есть такая структура dom:

<a>abc<span>def</span></a>

Я хочу получить текст из тега <a> при нажатии на него.

Однако, используя this.text, я получаю abcdef вместо abc.

Как бы я мог получить текстовое значение только <a>?

Я собираюсь сделать это так, а затем сделать substr() до длины текста <span>?

Answer 1

Другой вариант:

var text = $("a").contents().filter(function() { return this.nodeType == Node.TEXT_NODE; }).text();

Answer 2

Вы можете сделать это, получив .text() от .clone() без этих дочерних элементов, например:

$("a").click(function() {
  var text = $(this).clone().children().remove().end().text();
});

Вы можете проверить это здесь .

Answer 3

Другой вариант:

var text = $('a').text().replace($('a span').text(), '');

Answer 4

Вместо того, чтобы использовать библиотеку для прогулок, вы можете просто попросить браузер сделать это за вас:

var string = element.innerText || element.textContent;

Это должно работать во всех браузерах на основе webkit, firefox, т.е.1004 *

Answer 5

Если это фактическая структура (текст <a>, предшествующий <span>), вы можете сделать это:

$('a').click(function() {
    var txt = this.firstChild.nodeValue;
});

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