How to select multiple items in the list

Question

Hello!

Tell a newbie how to select several items from the list by their index and assign them a class?

We have the following code:

$(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

In the final array, we received the "sequence numbers" of li elements, to which we need to add the class .black. So, how to add it to several elements at once? each?

Tell me please.

The class must be added to a random number of random list items.

Alexey Shimansky Alexey Shimansky 36.9k five 47 115 · Accepted Answer · 2016-07-08T21:22:11

In general, the answer is yes. It is necessary to run through the array:

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

Full code:

 $(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>

Changed the .black style to .list li.black in css - otherwise it will not work due to the overlapping style .list li

Recommendation: when generating numbers, make another check that such a number has already been generated. Since you can generate an array with duplicates, like:

1, 4, 7, 2, 9, 2

Of course, when applying style - it will not affect in any way. But in any case it is wrong. Yes, and there may be problems in somewhere else, if for example the selection of five elements was expected, and two were highlighted. And so on...

Thank you very much! Everything is working. Check already added. - Fargard

How to select multiple items in the list

1 answer 1

More articles: