Найдите элемент, который имеет два CSS класса

Question

У меня есть следующий DIV:

<div class="gallery home"></div>

И у меня есть запрос:

  if ($('.gallery.home')) {
    console.log('home');
  }

  if ($('.gallery.showcase')) {
    console.log('showcase');
  }

Проблема в том, что оба if возвращают true. Разве только первый из них должен возвращать true?

Затем я попытался использовать только Javascript, происходит то же самое:

  if (document.getElementsByClassName('.gallery.home')) {
    console.log('home');
  }

  if (document.getElementsByClassName('.gallery.showcase')) {
    console.log('showcase');
  }

Как сопоставить элемент, имеющий 2 класса?

Answer 1

$('.gallery.showcase') возвращает jQuery завернутый список объектов, который имеет значение true-i sh, даже если не найдено ни одного элемента.

$('.gallery.showcase').length > 0 будет то, что вам нужно.

Answer 2

В документации сказано:

Вы также можете вызвать getElementsByClassName () для любого элемента; он будет возвращать только элементы, которые являются потомками указанного root элемента с данным классом names .

Также вы можете видеть в примерах:

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

Если вы хотите выбрать определенный элемент c, вы можете использовать querySelector

if (document.querySelectorAll('.gallery.home')) {
  console.log('home');
}

if (document.querySelectorAll('.gallery.showcase')) {
  console.log('showcase');
}

Для jquery части $('') всегда будет возвращать объект.

Answer 3

document.getElementsByClassName('gallery showcase');

Он разделен пробелом и без точки!

Answer 4

Вы можете сравнить его с одним или отдельным условием.

Одиночное условие, как

if($('.gallery.home').length > 0)
if($('.gallery.showcase').length > 0)

Отдельное состояние, как

if($('.gallery').length > 0 && $('.home').length > 0)

if($('.gallery').length > 0 && $('.showcase').length > 0)

console.log($('.gallery').length > 0 && $('.home').length > 0)

console.log($('.gallery').length > 0 && $('.showcase').length > 0)

console.log($('.gallery.home').length > 0)

console.log($('.gallery.showcase').length > 0)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery home"></div>