Перебор массива с добавлением класса по определенным заранее атрибутам id

90
14 октября 2019, 03:00

Мой вопрос о массивах и его проверке. Необходимо следующее.

На странице есть div-ы с атрибутом data-id="38383", причем эти id постоянно разные.

Что нужно: записать в массив определенные id. Далее делаем проверку на наличие этих div-ов с атрибутами data-id, указанными в массиве и выполняем добавление класса этому блоку с указанным id.

Выглядит так:

<div class="pr" data-id="10230"></div>
Answer 1

Из комментария
@CbIPoK2513, в массив заносим список id, далее ищем на странице класс .pr с data-id если id в массиве с data-id совпадает, добавляем классу с тем id с которым совпало дополнительный класс

let prArr = [ 
  '1', '2', '4', '5' 
]; 
 
for(var i=0; i<prArr.length; i++) { 
  let elem = $('.pr[data-id="'+prArr[i]+'"]'); // объявляем объект 
  if(elem.length > 0){ // Если объект существует 
    elem.addClass('asd'); // Добавляем ему класс 
  } 
  // P.s.  
  // Указав в цикле условие 
  // if(elem.length == 1) { 
  //   elem.eq(0).addClass('asd'); 
  // } 
  // Можно избежать таких моментом, если на странице, допустим случайно, существуют больше одного одинаковых элементов. 
}
.asd {color: green;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
 
<div class="pr" data-id="1">block 1</div> 
<div class="pr" data-id="2">block 2</div> 
<div class="pr" data-id="2">block 2</div> <!-- допустим такой вариант, что элементов с data-id="2" - две штуки. --> 
<div class="pr" data-id="3">block 3</div> 
<!-- Пропустим 4 --> 
<div class="pr" data-id="5">block 5</div>

Отличия от ответа @Vladimir
Перебор идёт не всех элементов с классом pr, а конкретно тех, что указанны в массиве.
Ну и написан код на JQ, как это было указанно в метке вопроса)

Answer 2

Что-то такого типа?

var red = ['10230', '10236']; 
document.querySelectorAll('.pr').forEach(function(div) { 
  if (red.includes(div.dataset.id)) { 
    div.classList.add('red'); 
  } 
});
.red { 
  background-color: #f00; 
}
<div class="pr" data-id="10230">10230</div> 
<div class="pr" data-id="10231">10231</div> 
<div class="pr" data-id="10232">10232</div> 
<div class="pr" data-id="10233">10233</div> 
<div class="pr" data-id="10234">10234</div> 
<div class="pr" data-id="10235">10235</div> 
<div class="pr" data-id="10236">10236</div>

READ ALSO
Применить hover не обозначая класс

Применить hover не обозначая класс

Подскажите пожалуйста, есть div без class , только styleМожно ли не задавая класс задавать hover для этого div?

115
Построение html графиков по данным csv

Построение html графиков по данным csv

У меня есть локальный файла csv, если возможно, хотелось бы чтобы в одной папке с ним лежал html с графиками, построенными на его данныхcsv обновляется...

106
Ширина HTML элемента

Ширина HTML элемента

Когда указываешь в CSS длину элемента 100%

111
position sticky

position sticky

Проблема в position stickyю Если я его добавляю, то скрипт работает только 1 раз: отматывая вниз, вверх после этого не отматывает

142