<li>の高さを取得したいです。

質問

WordPressでコメントを生成する時に出力される<li>の高さを取得したいです。

phpファイル内にjavascriptコードを記述して
document.write(document.getElementById("li-comment-<?php print comment_ID(); ?>").clientHeight);
としましたが、0が出力されるだけです。
document.write(document.getElementById("li-comment-46").clientHeight);
のように固定値を指定すると、「123」のように正常に値を取得して値を出力します。
("li-comment-<?php print comment_ID(); ?>")の部分の記述の仕方が悪いと思ってインターネットで調べて色々な書き方を試しましたが、動的に生成される値だと0しか出力されません。

また、
var comm = "li-comment-46";
var ans = jQuery("li[id=comm]").height();
document.write(ans);
とすると上記同様に値を出力しませんが、
var ans = jQuery("li[id=li-comment-46]").height();
document.write(ans);
とすると値を出力します。

変数であることが問題のようで、話を少し省略すると、変数から値を代入する時にthisに影響するから正常に値を取得できないという事をネットで見つけましたが、解決策がわかりません。

お手数と存じますが、ご回答を宜しくお願い致します。

話がそれましたが、本題は動的に生成される<li>の高さをどのような形でもよいので取得したいです。

回答No.3

ixkaito · ベストアンサー

正常に表示されなかった理由はいろいろ考えられます。実際どこにどのように記述したのか見てみないとなんとも言えませんが、画面が真っ白だったとのことでしたので、htmlの生成に干渉するところだったでしょう。単純な閉じタグ漏れなど、いろいろです。。。

うまくいった理由は単純にコメントの<li>を生成するたびに<script>も一緒に生成しているだけです。
ソースを見てみればわかると思いますが、それぞれのコメントの<li>の上に<script>が生成されています。

お礼

なるほど。タグの途中にJavascriptのコードを記載した事が悪かったのでしょうね。
何度も回答して頂きましてありがとうございます。

回答No.2

ixkaito

No.1です。

>10回はループしているのでレイアウトされたページに10回、99のような値が表示されていなければなりません。

window.onloadの場合、上書きする性質がありますので、最後のwindow.onloadのみが生き残ります。そういう意味で、jQueryを使った方がよいでしょう。なので、ループの話はjQueryのみに対する注意書きです。

>次にjQueryについてですが、真っ白な画面に99とnullが9回表示されました。

おそらく記述した場所がまずかったでしょう。
下記のように、コードをphpのliタグ生成の直前に入れてみてください。

----
<script type="text/javascript">
(function($){
$(window).load(function(){
var comm<?php print comment_ID(); ?>H = $("li#li-comment-<?php print comment_ID(); ?>").outerHeight();
alert(comm<?php print comment_ID(); ?>H);
});
})(jQuery);
</script>
<li id="li-comment-<?php comment_ID() ?>">
----

補足

ご回答をありがとうございます。

ixkaitoさんの仰る通りの場所に記述すると正常に値を取得する事が出来ました。

jQueryの記述の場所によって正常に値を取得する事の出来た理由を、私なりに結果から導き出される理由を作りだす事は出来ますが、できればixkaitoさんのご存じの理由を教えて頂きたいです。
不躾なお願いで申し訳ございませんが、宜しくお願い致します。

回答No.1

ixkaito

window.onload = function(){
処理
}

上記のようにonloadで括ってみてください。もしjQueryを使用するのでしたら、jQueryの$(window).load(function(){});のほうが良いかもしれません。

【jQueryの参考コード】
----
(function($){
$(window).load(function(){
var comm<?php print comment_ID(); ?>H = $("li#li-comment-<?php print comment_ID(); ?>").outerHeight();
alert(comm<?php print comment_ID(); ?>H);
});
})(jQuery);
----
コメントのループ外だと最後のコメントの値になると思います。
ループ内に入れる場合はalertがコメント数分出ますので注意してください。

二つ目の問題はただの文法ミスです。
jQuery("li[id=comm]")ですと、commは""内なので変数ではなく、"comm"というidになります。
jQuery("li[id="+comm+"]")とすればいけるはずです。

そもそも、idを変数にするよりも、セレクタごと変数にした方がよいと思います。またidやclassなど、jQueryはcssと同じ記述方法ができるので、#や.の方が楽でしょう。

----
var comm = jQuery("li#li-comment-46");
var ans = comm.height();
document.write(ans);
----

補足

ご回答、ありがとうございます。

まず、
window.onload = function(){
処理
}
についてですが、document.writeで値を表示させると真っ白な画面に99が表示されました。また、alertで値を表示させると1度だけ99が表示されました。
10回はループしているのでレイアウトされたページに10回、99のような値が表示されていなければなりません。

次にjQueryについてですが、真っ白な画面に99とnullが9回表示されました。
こちらもレイアウトされたページに10回、99のような値が表示されなければなりません。

私の求める解決まで一歩近づきましたが、解決まで及んでおりません。お手数と存じますが、さらにお知恵をお借りできれば幸いです。

どうぞ宜しくお願い致します。