Вопрос по html – Случайный порядок деления при загрузке страницы [дубликаты]

6

На этот вопрос уже есть ответ здесь:

Рандомизировать последовательность элементов div с помощью jQuery 3 ответа

У меня есть куча div с идентификаторомgallerycard», Мне нужно, чтобы они загружались в случайном порядке каждый раз, когда пользователь заходит на страницу.


     Akulina
    N/A



     Martina
    N/A



     Samantha
    N/A



     Karen
    N/A



     Jodie
    N/A



     Sophie
    N/A



     Olivia
    N/A



     Leigh
    N/A



     Kimberly
    N/A

А также...

Вот's скрипка с CSS: http://jsfiddle.net/BwJHj/

Я знаю, что это простая задача для большинства из вас, но иногда я действительно борюсь с jquery :(

Спасибо

@VaibhavJainне хорошая практика? этонедействительным Mr. Alien
Недопустимо использовать один и тот же идентификатор для нескольких классов divs.use вместо идентификатора. Vaibhav Jain
Покажите нам, что вы сделали до сих пор ... - попытки, которые вы сделали для этого ... Paritosh
Идентификаторы всегда должны быть уникальными. Вы назначаете один и тот же идентификатор различным элементам div. Если вам нужно выбрать разные элементы div с помощью селектора, присвойте им один и тот же класс, а не один и тот же идентификатор. Kumar Akarsh

Ваш Ответ

1   ответ
19

HTML

Сначала измените всеidсclasses посколькуid должен быть уникальным на странице.

<div class="gallerycard">
     <div id="girlname">Akulina</div>
    <div id="girlinfo">N/A</div>
</div>

<div class="gallerycard">
     <div id="girlname">Martina</div>
    <div id="girlinfo">N/A</div>
</div>

<div class="gallerycard">
     <div id="girlname">Samantha</div>
    <div id="girlinfo">N/A</div>
</div>

<div class="gallerycard">
     <div id="girlname">Karen</div>
    <div id="girlinfo">N/A</div>
</div>

<div class="gallerycard">
     <div id="girlname">Jodie</div>
    <div id="girlinfo">N/A</div>
</div>

<div class="gallerycard">
     <div id="girlname">Sophie</div>
    <div id="girlinfo">N/A</div>
</div>

<div class="gallerycard">
     <div id="girlname">Olivia</div>
    <div id="girlinfo">N/A</div>
</div>

<div class="gallerycard">
     <div id="girlname">Leigh</div>
    <div id="girlinfo">N/A</div>
</div>

<div class="gallerycard">
     <div id="girlname">Kimberly</div>
    <div id="girlinfo">N/A</div>
</div>

CSS (Поскольку разметка теперь использует классы, переключите стиль для отражения)

.gallerycard {
    margin: 8px;
    float: left;
    height: 150px;
    width: 221px;
    background-color: rgba(0, 0, 0, .3);
    border-radius: 8px;
}

Javascript

Выберите все элементы карты из DOM, затем сгенерируйте два случайных числа между 0 и cards.length. использованиеeq выбрать случайный элемент в выбранных элементах и расположить его перед другим случайно выбранным элементом в наборе выбранных элементов.

var cards = $(".gallerycard");
for(var i = 0; i < cards.length; i++){
    var target = Math.floor(Math.random() * cards.length -1) + 1;
    var target2 = Math.floor(Math.random() * cards.length -1) +1;
    cards.eq(target).before(cards.eq(target2));
}

JS Fiddle: http://jsfiddle.net/BwJHj/1/

@ user2724603 Рад, что смог помочь! Kevin Bowersox

Похожие вопросы