You can try:
$('.nav > ul > li > a:not([data-type="land"])').css({
color: 'blue'
});
質問
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.
解決 3
You can try:
$('.nav > ul > li > a:not([data-type="land"])').css({
color: 'blue'
});
他のヒント
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:
li
children of nav
, only ul
elements.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'
});
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
.
Try .not()
along with has attribute selector
$('.nav').find('li').not("[data-type]").css({
color: 'blue'
});
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'
});