1

Привет!

Подскажите новичку, как выбрать сразу несколько элементов из списка по их индексу и присвоить им класс?

Имеем следующий код:

$(document).ready(function() {

  //Объявляем переменные
  var listitems = jQuery(".list li"); //Элементы списка правого блока

  //Получаем кол-во элементов списка правого блока
  var total = listitems.length;

  //Получаем рандомное число от 1 до кол-ва элементов списка
  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  };
  var willSelect = getRandomInt(1, total); //Рандомное число

  //Получаем массив с рандомным количеством элементов списка
  var randArray = []; // массив, в котором будем хранить уникальные числа
  var i = 0; // индекс для массива
  var countNum = willSelect; // количество нужных чисел
  var max = total; // максимальное число
  var min = 1; // минимальное  число

  // цикл, пока не получим массив с уникальными числами
  while (i < countNum) {
    var rand = Math.floor(Math.random() * (max - min + 1)) + min; // генерируем случайное число
    if (find(randArray, rand) == 0) { // Проверяем уникальность числа
      randArray[i] = rand; // если уникальное, то заисываем его в массив
      i++;
    }

  };

  // проверяем вхождение в массив
  function randCheck(array, value) {
    for (var i = 0; i < array.length; i++) {
      if (array[i] == value) return 1;
    }
    return 0;
  };

  //Мы получили массив, с рандомными целыми уникальными числами.
  var willSelect = randArray;

  $("list li") / код / .addClass("black");

});
.wrap {
  display: block;
  width: 100%;
  height: 500px;
  background-color: lightgrey;
}
.list {
  display: block;
  width: 50%;
  height: 500px;
  background-color: darkgrey;
  margin: 0;
}
.list li {
  display: block;
  width: 100px;
  height: 50px;
  background-color: gray;
  text-align: center;
}
.black {
  background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
  </div

В итоговом массиве мы получили "порядковые номера" элементов li, к которым нужно добавить класс .black. Так вот, как добавить его сразу к нескольким элементам? each?

Подскажите, пожалуйста.

2
  • А к каким конкретно то нужно добавить класс? с какой-то определенной цифрой ? чем определяется то, что элементу нужно добавить класс? 8 июл 2016 в 20:53
  • Класс нужно добавить к рандомному количеству рандомных элементов списка.
    – Fargard
    8 июл 2016 в 20:56

1 ответ 1

0

В общем ответ - да. Надо пробегать в массиве:

$(".list li").each(function(index, element) {
    if (willSelect.indexOf(index + 1) != -1) {
        $(this).addClass('black');      
    }    
});

Полный код:

$(document).ready(function() {

  //Объявляем переменные
  var listitems = jQuery(".list li"); //Элементы списка правого блока

  //Получаем кол-во элементов списка правого блока
  var total = listitems.length;

  //Получаем рандомное число от 1 до кол-ва элементов списка
  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  };
  var willSelect = getRandomInt(1, total); //Рандомное число

  //Получаем массив с рандомным количеством элементов списка
  var randArray = []; // массив, в котором будем хранить уникальные числа
  var i = 0; // индекс для массива
  var countNum = willSelect; // количество нужных чисел
  var max = total; // максимальное число
  var min = 1; // минимальное  число

  // цикл, пока не получим массив с уникальными числами
  while (i < countNum) {
    var rand = Math.floor(Math.random() * (max - min + 1)) + min; // генерируем случайное число
    if (find(randArray, rand) == 0) { // Проверяем уникальность числа
      randArray[i] = rand; // если уникальное, то заисываем его в массив
      i++;
    }

  };

  // проверяем вхождение в массив
  function randCheck(array, value) {
    for (var i = 0; i < array.length; i++) {
      if (array[i] == value) return 1;
    }
    return 0;
  };

  //Мы получили массив, с рандомными целыми уникальными числами.
  var willSelect = randArray;
  
  $(".list li").each(function(index, element) {
    if (willSelect.indexOf(index + 1) != -1) {
      $(this).addClass('black');      
    }    
  });
});
.wrap {
  display: block;
  width: 100%;
  height: 500px;
  background-color: lightgrey;
}
.list {
  display: block;
  width: 50%;
  height: 500px;
  background-color: darkgrey;
  margin: 0;
}
.list li {
  display: block;
  width: 100px;
  height: 50px;
  background-color: gray;
  text-align: center;
}
.list li.black {
  background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
  </div>

Изменил в css стиль .black на .list li.black - иначе он не будет срабатывать из-за перекрытия стилем .list li


Рекомендация: при генерации чисел сделать еще проверку на то, что такое число уже было сгенерированно. Так как у вас может сгенерироваться массив с дубликатами, типа:

1, 4, 7, 2, 9, 2

Конечно при применении стиля - это никак не повлияет. Но в любом случае это неправильно. Да и могут возникнуть проблемы в где-нибудь в другом месте, если например ожидалось выделение пяти элементов, а выделилось два. И прочее...

1
  • Спасибо огромное! Все работает. Проверку уже добавил.
    – Fargard
    8 июл 2016 в 21:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.