【jQeury】テキストが入っている要素のみのCssを出力したい

Question

前提・実現したいこと

使用言語：jQuery　バージョン1.11.2

テキストが入っている要素のみを取得し、指定したCss（font-size等）を目に見える形（要素を追加して、それにテキストとして）で出力したい

最終的にはそれをブックマークレットとして使いたい
（jQueryは既にサイト上で読み込まれている前提　バージョン1.11.2）

発生している問題・エラーメッセージ

・テキストが入っていない要素（おそらくテキストが入っている要素の親要素）も取得してしまう
・text()で出力する時、改行がされない（console上では改行はされていた）

該当のソースコード

$(function(){

	//テキストが入っている要素取得
	var getEleInText = $(".content-section *").filter(function() { return $(this).text() !== ""; });

	//取得した要素にクラス付ける（eachで回すため）
	getEleInText.addClass("add-class--ele-in-text");

	//eachで回す
	$(".add-class--ele-in-text").each(function(i) {
		//要素を中に追加
		$(this).prepend("<div class='add-class--relative'><div class='add-class--target'></div></div>");
		//eachで回している要素のクラスを定義
		var targetClass = "add-class--target--" + i;
		//そのクラスを追加
		$(".add-class--target", this).addClass(targetClass);
		//css取得
		var getColor = "color: " + $(this).css("color");
		var getFs    = "font-size: " + $(this).css("font-size");
		var getFw    = "font-weight: " + $(this).css("font-weight");
		//出力するテキストを作成
		var str = getColor + "<br>" + getFs + "<br>" + getFw;
		var str = str.replace(/(<br>|<br />)/gi, '\n');
		//そのテキストを追加した要素に出力
		$("." + targetClass).text(str);
	});

	//style付与
	$(".add-class--relative").css({
		"position": "relative",
		"top" : "0"
	})
	$(".add-class--target").css({
		"position": "absolute",
		"top" : "0",
		"z-index" : "9999",
		"padding" : "8px 10px",
		"background" : "rgba(10, 10, 10, 0.8)",
		"color" : "#fff",
		"font-size" : "13px",
		"font-weight" : "400",
		"text-align" : "left"
	})

})

最終的にcssを出力する方法も今の要素を追加して出力するより良い方法もあると思いますが、現状これしか思いつきませんでした...
現状のエラー内容の良い解決策がありましたらご教授お願い致します。

Comments

[kei344]

HTMLも提示されたほうが良いと思います。

Answer 1

.filter(function() { return $(this).text() !== ""; })の時に、当然子要素や孫要素の持つ文字列も含まれるのでフィルタリングされていないのかと思いますので、以下でその要素が持つ文字列を見てあげます

var getEleInText = $(".content-section *").filter(function() {
  return $.trim(this.childNodes[0].textContent) !== ""; 
});

コンソール上では\nで開業されますが、HTML上で改行させる場合は<br>を使用します。
.text(str)だとHTMLタグとして出力されないので、.html(str)にするといいかと思います。

Comments

[退会済みユーザー]

詳しくお教えくださりありがとうございました。無事修正出来ました！

Answer 2

CSSセレクタには「直下の子要素」だけを指定出来る>という記号があります。

    var getEleInText = $(".content-section > *").filter(function() { return $(this).text() !== ""; });

また、これだとtext()で改行等が入っていた場合空白扱いにならないので、trimを使ったほうが良いかもしれません。

    var getEleInText = $(".content-section > *").filter(function() { return $(this).text().trim() !== ""; });

また、<br>等を埋め込む場合、textではHTMLタグが無視されてしまうのでhtmlを使います。

        //そのテキストを追加した要素に出力
        $("." + targetClass).html(str);

Comments

[退会済みユーザー]

上記回答を参考に修正することができました。ありがとうございました！

Answer 3

テキストが入っている要素の親要素

対策であれば

$(セレクタ).filter(function(){return $(this).text()!==""&&$(this).children().length==0;});

Comments

[退会済みユーザー]

上記回答を参考に修正することができました。ありがとうございました。