jQuery 子要素を含まない text() が欲しい時

子要素を含んでしまうタイプのHTML

こういうの昔から悩んでいました。

<div class='oya'>
親のテキスト
<span class='ko'>子のテキスト</span>
</div>

$(".oya").text(); //親のテキスト子のテキスト

ちがーーーうう！！！
親のテキストだけがほしいんじゃー！！

抗ってみる

$($(".oya")[0].outerHTML).children().empty().parent().text();
//親のテキスト

お、いけそうじゃん？

じゃあ、いっそ関数化してみよう

jQueryで関数化

function getFirstText(selector){
    return $(selector[0].outerHTML).children().empty().parent().text();
}

・・・子要素が無いと空っぽの戻り値が返ってくる＼(^o^)／ﾅﾝﾃｺｯﾀ

children()の戻り値がlength == 0の場合、それ以降にセレクタが機能しないので
parent()が意味を成さないようだ。

1ラインステートメントはやめて真面目に書けばよかったのだ。

function getSurfaceText(selector){
    var elem = $(selector[0].outerHTML);
    elem.children().empty();
    return elem.text();
}

getSurfaceText($(".oya"));
//親のテキスト

いけたー！

でも、どうせ関数化するならと、ちゃんとバニラなJavascriptで書き直してみた。

Javascriptのみで関数化

///一番上のノードにあるテキストを全部集めて返す。
function getSurfaceText(element){
    var text = "";
    for (var i = 0; i < element.childNodes.length; i++) {
        if (element.childNodes[i].toString() == '[object Text]'){
            text += 
                element.childNodes[i].data;
        }
    }
    return text;
}

///一番上のノードで最初に見つかったテキストを返す。
function getFirstText(element){
    for (var i = 0; i < element.childNodes.length; i++) {
        if (element.childNodes[i].toString() == '[object Text]'){

            return element.childNodes[i].data;
        }
    }
    return "";
}

jQueryからの使い方

getSurfaceText($("#ahya")[0]);

こんな感じで、セレクタではなく、エレメントを渡してあげて下さい。

いつもjQueryばっかり使っていると忘れてたけど、ノードを直接さわるとか超懐かしい。そうそう、こんなだったよ。

バニラなjavascriptのほうが、こういうのは得意だったんだ。