JQuery дети не имеют типа атрибута данных

0

Я хочу покрасить все прямые li файлы первой ul которые не имеют типа атрибута данных "земля".

У меня есть следующий JSFIDDLE, но по какой-то причине он выбирает детей подменю, а не прямых детей навигация. Который я, однако, был чем-то .children().

JS

$('.nav').children('li:not(:data-type)').css({
    color: 'blue'
});

HTML

<nav class="nav">
<ul>
    <li data-type="land"><a title="tree" href="#">tree</a>

        <div class="locations-wrapper">
            <ul class="sub-menu">
                <li> <a title="sub-tree-1" href="#">sub-tree-1</a>

                </li>
                <li> <a title="sub-tree-2" href="#">sub-tree-2</a>

                </li>
            </ul>
        </div>
    </li>
    <li data-type="land"><a title="bush"  href="#">bush</a>

        <div class="locations-wrapper">
            <ul class="sub-menu">
                <li> <a title="sub-bush-1" href="#">bush-tree-1</a>

                </li>
                <li> <a title="sub-bush-2" href="#">bush-tree-2</a>

                </li>
            </ul>
        </div>
    </li>
    <li> <a title="sun" href="#">sun</a>

    </li>
    <li> <a title="clouds" href="#">clouds</a>

    </li>
</ul>
</nav>

Я только хочу, чтобы элементы списка "солнце" и "облака" были окрашены.

  • 0
    Так как мне не ясно, я спрошу. Это то, что вы после jsfiddle.net/j08691/5aF4H/19 ?
  • 0
    Все ваши ссылки находятся внутри дочерних элементов .nav > ul , поэтому они тоже будут цветными. Почему бы не нацелить a[title="tree"] ?
Показать ещё 1 комментарий
Теги:
children

3 ответа

1
Лучший ответ

Можешь попробовать:

$('.nav  > ul > li > a:not([data-type="land"])').css({
    color: 'blue'
});

Пример jsFiddle

Поделиться
  • 0
    Спасибо! - Это сработало. Я обновился с более разумным выбором цвета. Для любого другого просмотра. jsfiddle.net/fidev/5aF4H/33
2

Ваш текущий код выдает следующую ошибку:

Ошибка поиска: ошибка синтаксиса, нераспознанное выражение: неподдерживаемый псевдо: тип данных

Чтобы не использовать тип данных, вам нужно будет использовать обозначение атрибута квадратной скобки:

...not('[data-type]')

Однако есть несколько других проблем с вашим кодом:

  1. Там нет li детей nav, только ul элементов.
  2. Нет li элементы не имеют data-type атрибута, только a элементы внутри них делают.

Предполагая, что вы хотите применить это к любому a элемент, содержащийся в списке, без data-type атрибута, вы можете просто:

$('.nav').children('ul').find('a').not('[data-type]').css({
    color: 'blue'
});

JSFiddle демо.

Если ul элемент всегда будет единственным ребенком вашего nav элемента, вы можете отбросить .children('ul') в целом и просто для поиска любого a элементе, содержащемся в nav.

Поделиться
  • 0
    Да, извините за это, я обновил код, чтобы отразить то, что задал вопрос. Я только хочу раскрасить элементы списка «солнце» и «облака».
1

Попробуйте использовать .not() вместе с селектором атрибутов

$('.nav').find('li').not("[data-type]").css({
    color: 'blue'
});

демонстрация

Также вы должны использовать .find() вместо od .children() потому что .children() трассирует только первый уровень иерархии. В вашем случае это обыкновение траверс li

редактировать

$('.nav').find('li a').not("[data-type=land]").css({
    color: 'red'
});

Обновленная скрипка

Поделиться
  • 2
    Тем не менее, находка глубже, чем на один уровень.
  • 0
    @fidev Это то, что вы хотите?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню