Как из nodeList выбрать элемент, имеющий определённый класс?

Question

[good_beginer]

<ul class="carusel__list">
                        <li class="carusel__item carusel__item_active">
                            <a class="carusel__pic" href="#">
                                <img src="http://lorempixel.com/300/200/people/1" alt="" />
                            </a>
                        </li>
                        <li class="carusel__item ">
                            <a class="carusel__pic" href="#">
                                <img src="http://lorempixel.com/300/200/people/2" alt="" />
                            </a>
                        </li>
                        <li class="carusel__item">
                            <a class="carusel__pic" href="#">
                                <img src="http://lorempixel.com/300/200/people/3" alt="" />
                            </a>
                        </li>
                        <li class="carusel__item">
                            <a class="slideshow__pic" href="#">
                                <img src="http://lorempixel.com/300/200/people/4" alt="" />
                            </a>
                        </li>
                    </ul>

let items = list.querySelectorAll('.carusel__item');
        let activeSlide = items.querySelector('.carusel__item_active'),

Comments

[Lynn «Кофеман»]

Написать цикл

Answer 1

[0xD34F]

О каком классе идёт речь: const className = 'carusel__item_active';.

Как проверить, что элемент имеет класс:

const hasClass = el => el.classList.contains(className);
// или
const hasClass = el => el.matches(`.${className}`);
// или
const hasClass = el => el.className.split(' ').includes(className);
// или
const hasClass = el => RegExp(`(^| )${className}( |$)`).test(el.classList.value);

Получаем элемент:

const activeSlide = Array.prototype.find.call(items, hasClass);

// или

let activeSlide = null;

for (const n of items) {
  if (hasClass(n)) {
    activeSlide = n;
    break;
  }
}

// или

const [ activeSlide ] = [...items].filter(hasClass);

// или

let activeSlide = null;

for (let i = 0; i < items.length && !activeSlide; i++) {
  activeSlide = hasClass(items[i]) ? items[i] : activeSlide;
}

Answer 2

[pmozil]

window.onload = function(){
 let items = document.querySelectorAll('.carusel__item');

for (var i = 0; i < items.length; i++){
	 items[i].onclick = activeItem;
}
 function activeItem(){
   this.classList.toggle('carusel__item_active');
 }

}