Проверить наличие класса и если есть добавить css

Question

Есть меню:

<div class="Nav__Megamenu -Fader">
<ul class="Nav__Sub Nav__Level--2">
  <li class="Nav__Item--Sub Nav__Item--Level-2  doubletap" data-next=".Nav__Block--0">
   <a class="Nav__Link--Sub Nav__Link--Level-2" href="/category/category_2275/">Смеси для пола</a>   </li>
<li class="Nav__Item--Sub Nav__Item--Level-2  doubletap" data-next=".Nav__Block--1">
  <a class="Nav__Link--Sub Nav__Link--Level-2" href="/category/category_2279/">Затирка</a>
</li>
<li class="Nav__Item--Sub Nav__Item--Level-2  doubletap" data-next=".Nav__Block--2">
<a class="Nav__Link--Sub Nav__Link--Level-2" href="/category/category_2276/">Плиточные клеи</a></li>
</ul>
<div class="Nav__Sub Nav__Level--3"></div>
</div>

Нужно проверить, если нету класса Nav__Level--3 то у .Nav__Megamenu сделать фон белым,

$(".Nav__Megamenu").map(function(){
    var check_level = $(this).find("Nav__Level--3");
        if(!check_level){
            $(this).css("background", "#fff");
    }
})

Вот так не получилось.. p.s делал map потому что Nav__Megamenu -Fader несколько на странице

Answer 1

const item = document.querySelector(".div");

if (item.classList.contains('someClass')) {
    // if true
}

Я написал сам принцип, вот для вашего случая

var cond = $(".Nav__Megamenu").hasClass("Nav__Level--3");
if (!cond) {
   $(".Nav__Megamenu").css("background", "#fff");
}

Answer 2

Проверьте правильность использования метода find!!! Элемент ищется с указанием . или #. И переменная всегда будет истинной так как всегда возвращается объект! Просто так сделайте:

$(".Nav__Megamenu").map(function(){
    var check_level = $(this).find(".Nav__Level--3");
        if(!check_level.length){
            $(this).css("background", "red");
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Nav__Megamenu -Fader">
<ul class="Nav__Sub Nav__Level--2">
  <li class="Nav__Item--Sub Nav__Item--Level-2  doubletap" data-next=".Nav__Block--0">
   <a class="Nav__Link--Sub Nav__Link--Level-2" href="/category/category_2275/">Смеси для пола</a>   </li>
<li class="Nav__Item--Sub Nav__Item--Level-2  doubletap" data-next=".Nav__Block--1">
  <a class="Nav__Link--Sub Nav__Link--Level-2" href="/category/category_2279/">Затирка</a>
</li>
<li class="Nav__Item--Sub Nav__Item--Level-2  doubletap" data-next=".Nav__Block--2">
<a class="Nav__Link--Sub Nav__Link--Level-2" href="/category/category_2276/">Плиточные клеи</a></li>
</ul>
<div class="Nav__Sub Nav__Level--3"></div>
</div>

<div class="Nav__Megamenu -Fader">
<ul class="Nav__Sub Nav__Level--2">
  <li class="Nav__Item--Sub Nav__Item--Level-2  doubletap" data-next=".Nav__Block--0">
   <a class="Nav__Link--Sub Nav__Link--Level-2" href="/category/category_2275/">Смеси для пола</a>   </li>
<li class="Nav__Item--Sub Nav__Item--Level-2  doubletap" data-next=".Nav__Block--1">
  <a class="Nav__Link--Sub Nav__Link--Level-2" href="/category/category_2279/">Затирка</a>
</li>
<li class="Nav__Item--Sub Nav__Item--Level-2  doubletap" data-next=".Nav__Block--2">
<a class="Nav__Link--Sub Nav__Link--Level-2" href="/category/category_2276/">Плиточные клеи</a></li>
</ul>
<div class="Nav__Sub Nav__Level--4"></div>
</div>

<div class="Nav__Megamenu -Fader">
<ul class="Nav__Sub Nav__Level--2">
  <li class="Nav__Item--Sub Nav__Item--Level-2  doubletap" data-next=".Nav__Block--0">
   <a class="Nav__Link--Sub Nav__Link--Level-2" href="/category/category_2275/">Смеси для пола</a>   </li>
<li class="Nav__Item--Sub Nav__Item--Level-2  doubletap" data-next=".Nav__Block--1">
  <a class="Nav__Link--Sub Nav__Link--Level-2" href="/category/category_2279/">Затирка</a>
</li>
<li class="Nav__Item--Sub Nav__Item--Level-2  doubletap" data-next=".Nav__Block--2">
<a class="Nav__Link--Sub Nav__Link--Level-2" href="/category/category_2276/">Плиточные клеи</a></li>
</ul>
<div class="Nav__Sub Nav__Level--4"></div>
</div>

БЛОГ НА HUSL

Проверить наличие класса и если есть добавить css

Ответы (2 шт):