jquery - jQueryを使用して他の子を持つ要素からテキストを取得する方法

Question

次のようなものがあります。

<div>
     Hello World
     <div>Something Else</div>
</div>

javascript/jQuery を使用して、「Hello World」テキストだけを取得したいと考えています。スパンでラップして選択することもできますが、これを行う方法を知りたいと思っています。

$('div').text() を使用するだけでうまくいくと思いましたが、「Hello WorldSomething Else」が表示されます。

ありがとう、マット

Answer 1

これを試して：

var div = document.getElementsByTagName('div')[0].firstChild;
var text = div.textContent ? div.textContent.trim() : div.innerText;

フィドル

_{IE8 以前のバージョンではこの機能がサポートされていないことに注意してください。jQuery を使用している場合は、クロスブラウザーであるtrimjQuery ユーティリティ機能を使用できます。$.trim()$.trim(text)}

Answer 2

これが@minitechの答えに似すぎている場合は申し訳ありません：

var text = $('div:first')
    .contents()
    .filter(function() {
        return (this.nodeType === 3);
    }).text();

alert(text);​

contents()(選択した要素のコンテンツを取得する) とfilter()、一致したセットをテキストのみに減らす (nodetype === 3は「テキスト」を意味します)の組み合わせを使用できます。

jsフィドル

もちろん、first()HTML がどのように表示されるかについて自信がある場合は、代わりに使用できます。

var text = $('div:first')
    .contents()
    .first()
    .text();

jsフィドル

Answer 3

text()あなたが発見したように、ターゲットノードだけでなく、子/子孫ノードのテキストも取得します。

そうでない場合でも、現在の形式のコードは両方のテキストの連結を返します。これは、セレクターが単にdivをターゲットにしているためです。したがって、jQuery はすべてdivの を検索し、それらのテキストをテキストの 1 つのチャンクとして取得します。

他の方法もありますが、このような方法でのみ要素の即時テキストを取得できます。

//make a mini plugin for getting the immediate text of an element
$.fn.extend({
    immediateText: function() {
        return this.clone().find("*").remove().end().text();
    }
});

//use the plugin
var immediateText = $('#some_element').immediateText();

Answer 4

使用.contents:

yourDiv.contents().filter(function() {
    return this.nodeType === 3;
}).map(function() {
    return this.nodeValue;
}).get().join('');

または、sans jQuery:

var i, c, result = '';

for(i = 0; c = yourDiv.childNodes[i]; i++) {
    if(c.nodeType === 3) {
        result += c.nodeValue;
    }
}

Answer 5

要素 (最初の div) を複製し、すべての子を削除してテキストを取得し、オプションで次のように空白を削除します$.trim()。

var elm = $('div:first').clone();
var text = $.trim(elm.children().remove().end().text());

フィドル