Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

子要素を含んでしまうタイプの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のほうが、こういうのは得意だったんだ。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away