Edited at

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のほうが、こういうのは得意だったんだ。