jQuery children not have data attribute type of

Question

I want to color all the direct li children of the first ul that do not have a data attribute type of 'land'.

I have the following JSFIDDLE but for some reason it's selecting the children of the sub-menu not the direct children of the nav. Which I though was what .children() does.

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>

I only want the li list items 'sun' and 'clouds' to be coloured.

Answer 1

You can try:

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

jsFiddle example

Answer 2

Your current code is throwing the following error:

Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: data-type

In order to do a not data-type you'd have to use the square bracket attribute notation:

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

However there are several other problems with your code:

1. There are no li children of nav, only ul elements.
2. No li elements have a data-type attribute, only the a elements within them do.

Assuming you want to apply this to any a element contained within the list with no data-type attribute, you can simply:

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

JSFiddle demo.

If the ul element will always be the only child of your nav element, you can drop the .children('ul') altogether and just search for any a element contained within the nav.

Answer 3

Try .not() along with has attribute selector

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

DEmo

Also you should use .find() instead od .children() because .children() travere only first level of hierarchy. In your case it wont traverse to li

Edit

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

Updated fiddle