1394611360 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');
}
});
});
----------------------------------------------------

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/03/12 17:02:40
  • 終了:2014/03/13 11:53:49

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4487ベストアンサー獲得回数18562014/03/12 17:16:32

ポイント300pt

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

<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);
    }
他5件のコメントを見る
id:a-kuma3

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

回答に追記しました。

2014/03/12 22:26:52
id:u_7cc

arguments.callee は廃止なので使わないほうが良いですよ

2014/03/13 10:23:37

その他の回答(0件)

id:a-kuma3 No.1

a-kuma3回答回数4487ベストアンサー獲得回数18562014/03/12 17:16:32ここでベストアンサー

ポイント300pt

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

<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);
    }
他5件のコメントを見る
id:a-kuma3

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

回答に追記しました。

2014/03/12 22:26:52
id:u_7cc

arguments.callee は廃止なので使わないほうが良いですよ

2014/03/13 10:23:37
id:fengtutian

質問者から

gonee2014/03/13 11:56:50

なぜかうまくいきませんでしたが、原因が分かりました。
上記、
<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です。


--------------------------------------
a-kuma3さん
丁寧な説明ありがとうございました。
ベストアンサーとさせていただきます。

最後のsetTimeoutのスクリプトですが、ローカルのHTML上では動作しましたが、WordPress上では動作確認ができずで、とりあえず時間をずらしたsetTimeoutスクリプトを5個くらい配置して応急処置をしました。

今回の質問に対する回答としましては、以上で十分ですので閉じさせていただきます。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません