是否可以使用.each（）數組來定位多個div？

只是一點點免責聲明：我是jquery/javascript編程的總新手，並且只知道html/css設計的基礎知識。是否可以使用.each（）數組來定位多個div？

我一直試圖在頁面上隨機定位一些soundcloud小部件。我似乎設法實現了這一點 - 但爲此我做了：在css中創建一個新的div id，將每個小部件分配給一個單獨的div id名稱，然後編寫一個函數將每個div移動個別。我嘗試使用.each（），但從我可以在其他問題中收集，這不能運行通過divs，只有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小部件 - 以及一些js，它將通過該div的每個實例循環並運行該函數以重新定位div。

這是可能的嗎？

非常感謝！

來源

2012-11-15 user1826284

您可以使用.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-15 10:40:13 nnnnnn

p.S.我通常不喜歡創建僅使用一次的變量。這是上面的一個較短版本，不會打擾創建'divWidth，divHeight，heightMax或widthMax'：http://jsfiddle.net/scVRS/65/（我在上面的回答中留下了它們，以便您可以看到我的解決方案與您的原始代碼有多相似）。 – nnnnnn

而不是寫相同的功能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-15 10:42:59

是否可以使用.each（）數組來定位多個div？

回答

相關問題