Наличие дочернего элемента

171

02 июля 2018, 06:30

Всем привет!

Есть несколько пунктов меню .js-dropDown Если у него нету в дочернем элементе .js-dropDown-box то дочерней ссылке .js-dropDown-toggle нужно дать класс .no-drop

Ниже пример HTML разметки

<li class="hasChild js-dropDown">
    <a href="/catalog/dom/" class="js-dropDown-toggle" title="Дом" itemprop="url">
            <span itemprop="title">Дом</span>
    </a>
    <ul class="js-dropDown-box">
        <li><a href="/catalog/vip_suveniry/">VIP сувениры</a></li>
    </ul>
</li>
<li class="hasChild js-dropDown">
    <a href="/catalog/domq/" class="js-dropDown-toggle" title="Дом" itemprop="url">
            <span itemprop="title">Дом</span>
    </a>
</li>

Попытался реализовать таким методом, но не получается.

$( ".hasChild.js-dropDown" ).each(function() {
     if($(this).children('.js-dropDown-box').leght > 0) {
    var link = $(this).children('.js-dropDown-toggle');
    link.addClass('no-drop');
     }
});

Что я делаю не так? Спасибо!

Answer 1

... Если у него нету в дочернем элементе .js-dropDown-box ...

и дальше условие

if($(this).children('.js-dropDown-box').leght > 0) {

тут проверяется что наследники присутствуют

вот код с правками:

$( ".hasChild.js-dropDown" ).each(function() {
    if($(this).children('.js-dropDown-box').length  == 0) {
    var link = $(this).children('.js-dropDown-toggle');
    link.addClass('no-drop');
     }
});

Answer 2

$( ".hasChild.js-dropDown" ).each(function() {
     if(!$(this).children('.js-dropDown-box').length > 0) {
    var link = $(this).children('.js-dropDown-toggle');
    link.addClass('no-drop');
     }
});

проблему решил length !$(this)

Переписал

'use strict';
// hide navbar icon
    document.querySelectorAll('.js-dropDown').forEach( dropdown => {
     const haschild = !!dropdown.querySelector('.js-dropDown-box');
      if(!haschild) dropdown.querySelector('.js-dropDown-toggle').classList.add('no-drop');
    })