変数の使用によって挙動が変わる理由がわかりません。

###前提・実現したいこと
１００文字以上のテキストに対して[続きを読む]を表示させ、クリックで全文章を表示し[×] 閉じるを追加するスクリプトを書いているのですが、textTriming関数内で変数selfTextを使わないとうまく動かない原因がわかりません。どういった理由で発生しているのかご教授いただけますでしょうか。

###発生している問題

<!DOCTYPE html>
<html xml:lang="ja" lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
#wrapper {
	margin: 0 auto;
	padding: 80px 0;
	width: 800px;
	text-align: left;
}

p {
	padding-bottom: 2em;
	visibility: hidden;
}

.textOpen {
	margin-left: 10px;
	color: #ff0000;
	font-weight: bold;
}

.textClose {
	margin-left: 10px;
	color: #666;
	font-weight: bold;
}

</style>

<script>
$(function(){

	var cutElm = $('p'),
	cutCount = 100,
	openTxt = '… 続きを見る',
	closeTxt = '[×] 閉じる';

$('p').each(function(){
var self = $(this),
		selfText = self.text(),
		textLength = selfText.length,
		textTrim = selfText.substr(0,cutCount);

	function textTriming (){
		self.html(self.text().substr(0,100)+'<a href="javascript:void(0);" class="textOpen">' + '… 続きを見る' + '</a>').css({visibility:'visible'});

		self.find('.textOpen').on('click',function(){
			self.html(self.text()).append('<a href="javascript:void(0);" class="textClose">' + '[×] 閉じる' + '</a>');
// self.html('self.text()')ではなく、変数selfTextを入れたself.html(selfText)でないと動かない理由がわからない
var selfText2 = self.text()
console.log(selfText2);
		self.find('.textClose').on('click',function(){
			textTriming();
		});
		});
	}

	if(100 < self.text().length){
		textTriming();
	}else if(100 >= self.text().length()){
		self.css({visibility:'visible'});
	}
});
});
</script>
</head>

<body>

<div id="wrapper">
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
</div><!-- /#wrapper -->
</body>
</html>