3

只是一点免责声明：我是 jquery/javascript 编程的新手，只知道 html/css 设计的基础知识。

我一直在尝试在页面上随机放置一些 soundcloud 小部件。我似乎已经设法实现了这一点 - 但要做到这一点，我必须：在 css 中创建一个新的 div id，将每个小部件分配给一个单独的 div id 名称，然后编写一个函数来单独移动每个 div。我尝试使用 .each()，但从我可以收集到的其他问题来看，这不适用于遍历 div，只有 div.class 名称......从这里开始，我在尝试 .each() 时感到非常困惑；.parent(); 测试中的类名等..

这是我每次都必须复制的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 中定义一个 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 回答