javascript - jQuery セレクターの混乱

Question

私は次のコードを持っています..

<span class="under"> 
texthere
    <ul class="list">
        <li> list text here</li>
    </ul>
</span>

実行する$(".under").text()と、「textherelist text here」が表示されます。

私は試してみましたが$(".under :not(.list)").text()、過小評価されました。

また、正しい出力が得られません$(".under").not(".list").text()

だから私の最後の試みは$(".list").parent().text()

textherelist text here になります

とても単純なことでどこが間違っているのですか？

ps は jQuery である必要はありません。より単純であれば、JavaScript にすることができます。

欲しい結果：texthere

score 3 · Accepted Answer

だから私はあなたがテキストの後にいると推測しています：texthere？

var elem = $(".under").clone(),
    text = $.trim(elem.children().remove().end().text());

要素のクローンを作成し、すべての子要素を削除して、残りのテキストを取得します。</ p>

score 2 · Accepted Answer

説明：子孫を含む、一致した要素のセット内の各要素の結合されたテキストコンテンツを取得します。

そうです、その動作は予想されます。

これを試して、セレクターの直接のテキストノードのみを取得できます。

$('.under').contents().filter(function(){ return(this.nodeType == 3); }).text()

説明：

.contents()（docs）は、textnodesを含むセレクターの子を返します

説明：テキストノードやコメントノードなど、一致した要素のセット内の各要素の子を取得します。

.filter()必要なものだけを返すためにコールバックを取ります。これに基づいてnodeType == 3、テキストノードである、を持つものだけを取ります。

score 2 · Accepted Answer

どうぞ：

var text = $('.under').contents(':not(.list)').text();

3 に答える 3