javascript - 要素のテキストを取得するが、その要素の子を除外する方法は?

Question

HTML スニペットがあります。

<li class="as-selection-item">
<a class="as-close">×</a>
Rudy Hamilton
</li>

内部からRudy Hamilton値li.as-selection-itemを取得せずに、値を取得するにはどうすればよいですか?xa.as-close

Answer 1

解決策 1

document.querySelector('.as-close').nextSibling.nodeValue

JSFiddle デモ: http://jsfiddle.net/t8Qst/

nextSiblingクラスを持つ要素の直後にノードを取得するために使用しますas-close。

解決策 2

アンカーを除いて、li 内のすべてを取得したい場合は、これを使用できます。

var li = document.querySelector('.as-selection-item').cloneNode(true);
li.removeChild(li.querySelector('.as-close'));
alert(li.textContent);

li のクローンを作成し、クローンからアンカーを削除して、そのテキストを表示するだけです。

JSFiddle デモ: http://jsfiddle.net/58pLz/

jQuery を使用すると (既に使用している場合)、次のようになります。

var li = $('.as-selection-item').clone();
$('.as-close', li).remove();
alert(li.text());

Answer 2

jQueryを使用すると、これを使用できます：

$(".as-selection-item").text();

.as-selection-itemこれにより、html ではなく、内部のすべての thext が返されます。

(アンカーではなく) .as-selection-item 内のテキストのみが必要な場合は、これを使用できます。

$(".as-selection-item").clone().children().remove().end().text();

これにより、オブジェクトが複製され、子が削除され、テキストが返されます。

フィドル