3

免責事項: 私は jquery/javascript プログラミングの初心者であり、html/css 設計の基本しか知りません。

ページ上に多数の soundcloud ウィジェットをランダムに配置しようとしています。私はこれを達成できたようです-しかし、そうするために私は持っていました:cssで新しいdiv idを作成し、各ウィジェットを個別のdiv id名に割り当て、次に各divを個別に移動する関数を記述します。私は .each() を使用してみましたが、他の質問で収集できることから、これは div を実行するのに機能せず、div.class 名のみです...ここから .each(); を試すのに非常に混乱しました。。親（）; テスト中のクラス名など..

これは毎回コピーする必要がある js です (「scTrack」の後に番号を変更するだけです):

(function() {

var docHeight = $(document).height(),
    docWidth = $(document).width(),
    $div = $('#scTrack1'),
    divWidth = $div.width(),
    divHeight = $div.height(),
    heightMax = docHeight - divHeight,
    widthMax = docWidth - divWidth;

$div.css({
    left: Math.floor(Math.random() * widthMax),
    top: Math.floor(Math.random() * heightMax)
});
});

CSS:

#scTrack1 {
position:absolute;
height:70px;
width: 200px;
}

html

<div id="scTrack1">
<object height="81" width="100%"> <param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F67155680&amp;show_comments=false&amp;auto_play=false&amp;color=000000"></param> <param name="allowscriptaccess" value="always"></param> <embed allowscriptaccess="always" height="81" src="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F67155680&amp;show_comments=false&amp;auto_play=false&amp;color=000000" type="application/x-shockwave-flash" width="100%"></embed> </object>    
</div>

これがjsfiddleの私の例です：http://jsfiddle.net/antrgor_reiz/scVRS/

私が達成したいのは、cssで定義された1つのdiv（さまざまなsoundcloudウィジェットすべてに使用される）と、そのdivの各インスタンスをループし、関数を実行してdivを再配置するjs..

これは可能ですか??

どうもありがとう！

4

2 に答える 2

3

.each()任意のセレクター（クラス名の有無にかかわらず）から作成された任意のjQueryオブジェクトをループするために使用できます。

$("div").each(function() { ... });       // loop through all divs
$("div.test").each(function() { ... } ); // loop through all divs of class "test"
$(".test").each(function() { ... });     // loop through any elements of class "test"

あなたの場合、これはトリックを行います：

$(function() {    
    var docHeight = $(document).height(),
        docWidth = $(document).width();

    // process each div that is a child of "container"
    $("#container div").each(function() {

        // get the current div's dimensions
        var $div = $(this),
            divWidth = $div.width(),
            divHeight = $div.height(),
            heightMax = docHeight - divHeight,
            widthMax = docWidth - divWidth;

        // set the current div's position
        $div.css({
            left: Math.floor(Math.random() * widthMax),
            top: Math.floor(Math.random() * heightMax)
        });
    });
});

デモ： http： //jsfiddle.net/scVRS/62/

于 2012-11-15T10:40:13.530 に答える
0

four同じ機能の異なる関数を書く代わりに、あなたは使うことができます.each()

$(document).ready(function() {
    $('object').each(function(){
        var $pDiv = $(this).parent('div');
        var docHeight = $(document).height(),
                docWidth = $(document).width(),
                $div = $pDiv,
                divWidth = $div.width(),
                divHeight = $div.height(),
                heightMax = docHeight - divHeight,
                widthMax = docWidth - divWidth;

         $div.css({
             left: Math.floor(Math.random() * widthMax),
             top: Math.floor(Math.random() * heightMax)
         });        

    })
});

デモ ： http： //jsfiddle.net/muthkum/scVRS/59/

于 2012-11-15T10:42:59.093 に答える