在jquery頁面加載隨機化div的順序？

我在我的第一個網站上工作（個人使用我的投資組合）。我有divs內容，但希望它們在每次頁面重新加載時隨機重新排序。我試圖尋找解決方案，發現了一些類似的問題，但沒有得到任何工作（也許這是因爲我的內容有多個類？）。在jquery頁面加載隨機化div的順序？

我有什麼身體標記內的是：

<div class="box work_self work_all"> 
<img src="1.jpg' /> 
</div> 
<div class="box work_group work_all"> 
<img src="2.jpg' /> 
</div> 
<div class="box work_group work_all"> 
<img src="3.jpg' /> 
</div>

[...]等等。

幫助表示讚賞！謝謝！

來源

2014-01-14 user3195593

*「發現了幾個類似的問題，但沒有得到任何工作」*哪些問題？你究竟試過了什麼？這些元素是同一父母的全部（和唯一的孩子）嗎？ –

爲什麼在你的屬性中混合單引號和雙引號？ – Scimonster

相關問題：http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array – Blazemonger

下面將他們走出DOM和打印他們回來了隨機。

$(document).ready(function() { 
//get list of divs 
var div = $(".box").toArray(); 

//randomly print them back out. 
while(div.length > 0) { 
    var idx = Math.floor((Math.random() * (div.length-1))); 
    var element = div.splice(idx, 1); 
    $('body').append(element[0]); 
} 
});

來源

2014-01-14 20:50:29

這工作完全！非常感謝您的幫助和工作！ – user3195593

＆爲詳細的步驟，真的幫助！ – user3195593

您的第一步（'div = [];'覆蓋它之前）和第三步（首先刪除所有內容 - 「.empty（）'，其次'在別處追加'將它們從其原始位置移除）aren沒有必要。 – Ryan

試試這個：

var divs = []; 
var divs_shuffle = shuffle($('.box').get()); 
for(var i in divs_shuffle){ 
    divs.push(divs_shuffle[i].outerHTML); 
} 
$('body').html(divs.join(''));

您可以在這裏找到https://stackoverflow.com/a/6274398/2604607

來源

2014-01-14 21:27:44 lashab

對不起洗牌（）函數的晚了，對此，我希望這仍然可以幫助你。在這裏你有一個活的小提琴：http://jsfiddle.net/J5z4n/1/及以下你有源代碼。你可以用另一個大於元素數的數字替換10。這個想法是保存目標標籤的innerHTML，然後交換它們。

var elements = $("div"); 
var elementsInnerHtmls = []; 
var numberOfElements = elements.length; 

for(var i = 0 ; i < numberOfElements ; i++){ 
    elementsInnerHtmls.push(elements[i].innerHTML); 
} 

var checkedIndexes = []; 
for(var i = 0 ; i < numberOfElements ; i++){ 
    var randomIndex = Math.floor(Math.random()*10) % numberOfElements; 
    while(checkedIndexes[randomIndex] != undefined){ 
     randomIndex = Math.floor(Math.random()*10) % numberOfElements;  
    } 
    checkedIndexes[randomIndex] = true; 
    elements[i].innerHTML = elementsInnerHtmls[randomIndex];  
}

來源

2014-01-14 22:59:00

在jquery頁面加載隨機化div的順序？

回答

相關問題