人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQueryで高さを取得してclass付与の方法

jQuery初心者です。
図のような構造のコーディングをしております。
それぞれ違う高さの画像を横並びにしており、高さが540px以上のliに対してheightというclassを付与するにはどうしたらよいでしょうか?

HTMLは、下記です。

----------------------------------------------------
<ul id="cont">
<li><a href="#"><img src="" /></a></li>
<li><a href="#"><img src="" /></a></li>
<li><a href="#"><img src="" /></a></li>
<li><a href="#"><img src="" /></a></li>
</ul>
----------------------------------------------------


下記のようなスクリプトを書きましたがダメでした。
----------------------------------------------------
var height = $('#conts li').height();

$(function(){
$('#conts li').each(function(){
if(height > 540){
$(this).addClass('height');
}
});
});
----------------------------------------------------


1394611360
●拡大する


●質問者: gonee
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●300ポイント ベストアンサー

こんな感じで、いけると思います。

<script>
$(function(){
 $('#conts li').each(function(){
 var h = $(this).height();
 if (h > 540) {
 $(this).addClass('height');
 }
 });
});
</script>

<style>
.height {
 ...
}
</style>

<ul id="conts">
<li><a href="#"><img src="..." /></a></li>
<li><a href="#"><img src="..." /></a></li>
<li><a href="#"><img src="..." /></a></li>
<li><a href="#"><img src="..." /></a></li>
</ul>

質問にあったコードだと、jQuery のセレクタと、HTML で UL の ID が違ってたんで、"conts" に合わせてあります。






追記です。

「setTimeout()で、要素ができあがるまでリトライ」するにはどうしたらいいでしょうか?

こんな感じ。

$(function(){
 setTimeout(function() {
 //console.log("..."); ※ここに console.log を仕込んでおくと、動作が分かると思います
 if ($('#conts li').each(function(){
 var h = $(this).height();
 if (h > 540) {
 $(this).addClass('height');
 }
 }).length == 0) {
 setTimeout(arguments.callee, 500);
 }
 }, 500);
});

.each() の戻り値は、セレクタで集めた jQuery オブジェクトそのものです。
.each() で、クラスの付加をチャレンジして、その対象がゼロ個だったら、もう一度 setTimeout します。
関数の中での arguments.callee は、その関数そのものを表します。なので、以下の関数 foo は、自分自身を 500ms ごとに繰り返すことになります。

 function foo() {
 ...

 setTimeout(arguments.callee, 500);
 }

goneeさんのコメント
なぜかうまくいきません。。 $('#conts li').addClass('height'); でやると、ちゃんとliにheightクラスが付与されるのですが、 if文+eachつかうとうまくいかないですね。

goneeさんのコメント
すみません、原因が分かりました。 上記、<li>-</li>がJSプラグインで書き出されたHTMLでした。 これらを選択するにはどうしたらよいでしょうか?

goneeさんのコメント
すみません、原因が分かりました。 上記、 <LI>ー</LI> がJSプラグインで書き出されたHTMLでした。 これらを選択するにはどうしたらよいでしょうか?

a-kuma3さんのコメント
>> <LI>ー</LI> がJSプラグインで書き出されたHTMLでした。 これらを選択するにはどうしたらよいでしょうか? << そのプラグインは、ロード時に要素を作るタイプでしょうか? であれば、setTimeout()で、要素ができあがるまでリトライする感じでしょうか。 プラグインによっては、イベントを持っているかもしれません。

goneeさんのコメント
var j$ = jQuery; setTimeout(function(){ j$(function () { $('#conts li').each(function(){ var h = $(this).height(); if (h > 540) { $(this).addClass('height'); } }); }); },2000); で実行OKでした。 ただ、、2000で時間固定しているので、通信が遅れた場合に、実行されるか心配です。 「setTimeout()で、要素ができあがるまでリトライ」するにはどうしたらいいでしょうか? 参考URLを送っていただけるのみでもOKです。

a-kuma3さんのコメント
>> 「setTimeout()で、要素ができあがるまでリトライ」するにはどうしたらいいでしょうか? << 回答に追記しました。

7ccさんのコメント
arguments.callee は廃止なので使わないほうが良いですよ

質問者から

なぜかうまくいきませんでしたが、原因が分かりました。
上記、
<LI>ー</LI>
がJSプラグインで書き出されたHTMLでした。
これらを選択するにはどうしたらよいでしょうか?

--------------------------------------------------------------------
var j$ = jQuery;
setTimeout(function(){
j$(function () {
$('#conts li').each(function(){
var h = $(this).height();
if (h > 540) {
$(this).addClass('height');
}
});
});
},2000);

で実行OKでした。
ただ、、2000で時間固定しているので、通信が遅れた場合に、実行されるか心配です。

「setTimeout()で、要素ができあがるまでリトライ」するにはどうしたらいいでしょうか?
参考URLを送っていただけるのみでもOKです。


関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ