Question

我想为没有数据属性类型为“land”的第一个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>

我只希望li列表项“sun”和“clouds”被着色。

Answer 1

您当前的代码抛出以下错误：

未捕获错误：语法错误，无法识别的表达式：unsupported pseudo：data-type

要执行 not data-type ，您必须使用方括号属性表示法：

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

但是您的代码还有其他一些问题：

li只有nav个孩子，只有ul个元素。
没有li元素具有data-type属性，只有a个元素属于。{/ li>
假设您要将其应用于列表中包含的任何 a元素且没有data-type属性，您只需：
```
$('.nav').children('ul').find('a').not('[data-type]').css({
    color: 'blue'
});
```
JSFiddle demo

如果ul元素始终是nav元素的唯一子元素，则可以完全删除.children('ul')并只搜索其中包含的任何a元素nav。

Answer 2

尝试.not()和has attribute selector

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

DEmo

此外，您应该使用.find()而不是.children()，因为.children()仅限于第一层次的层次结构。在你的情况下，它不会遍历li

修改

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

Updated fiddle

Answer 3

您可以尝试：

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

<强> jsFiddle example

jQuery子节点没有数据属性类型

3 个答案: