JQUERYの記述の位置によって動作したりしなかったりします。原因は何でしょうか？

Question

始めてご相談させていただきます。
よろしくお願いしますm(_ _)m

jqueryのプラグイン化に挑戦していたのですが、jqueryの記述の場所によって動いたり動かなかったりします。
正確に言うと指定したclassより上に書くと動作しません。
今回はテキストが長かったら途中で消して三点リーダーをつけるようにします。

<script type="text/javascript">
(function($){
	$.fn.textTrim = function(options){

		var defaults = {
			text: 10
		}
		var setting = $.extend(defaults,options);
		var textnum = setting.text;

		this.each(function(){
			
			var textLen = $(this).text().length;
			var textTrim = $(this).text().substr(0,textnum);
			if(textLen > textnum){
				$(this).text(textTrim + "…");
			}
			alert(textTrim);
		});
		return this;
	}
})(jQuery);
$(".moge li").textTrim({
	text: 19
});
</script>

<ul class="moge">より下に書けば、 alert(textTrim); が反応してくれますが、上だと反応なしです。

なぜそうなるのかがまったく見当がつきません。
何卒よろしくお願いします。

Answer 1

原因は、取得しようとしている要素がその時にはないからです。

headの中に記述すれば、大体解決します。
どうしてもbodyの中に書かないといけない場合は、要素の出力後に記述してください。

Comments

[d__suke]

ご回答ありがとうございます！
headの中にも書いたですがだめだったのですが、

＞要素の出力後に記述してください。

のご指摘どおり読み込んでから実行したら動きました。
ありがとうござます！

Answer 2

$(".moge li").textTrim({
    text: 19
});

↑この部分を実行した時点で、まだドキュメント全体を読み込み終わっていないため、実行できなくなっているのです。

    $(".moge li").textTrim({
        text: 19
    });
})(jQuery);
</script>

↑この位置に入れてみてください。

Comments

[d__suke]

ご回答ありがとうございます！
早速試してみましたがエラーが出てしまいました。

>↑この部分を実行した時点で、まだドキュメント全体を読み込み終わっていないため
との事なので
$(window).load(function(){
$(".moge li").textTrim({
text: 19
});
});

としてみたのですが、これも駄目でした。

[d__suke]

すいません、訂正します。
(jQuery)の位置を変えるのは駄目でしたが、

>↑この部分を実行した時点で、まだドキュメント全体を読み込み終わっていないため
これがものすごいヒントになりました。
上記のではclass="moge"だったので動きませんでしたが、class名をちゃんと直したら動きました！

ありがとうございます！！
助かりました！！
僕も誰かを助けられたらなと思いました。