jQuery添加类到除1个以外的所有兄弟元素

Question

我有一个这样的列表：

<ul id="items"><li><a href="">Link</a></li><li><a href="">Link</a></li><li class="divider"></li><li><a href="">Link</a></li><li><a href="">Link</a></li></ul>

当我点击所有锚点时，我想为除我所点击的链接的父元素和具有“divider”类的li以外的所有li添加一个类。使用以下代码，我可以使所有同级元素起作用：

 $(this).parent().siblings().attr("class", "transparent");

那么我该如何让它忽略带有 "divider" 类的 li 呢？

非常感谢。

- Daelan

Answer 1

你还可以使用.not命令从集合中过滤掉不需要的内容。这是一种替代方法，可以避免像Matt提到的那样传递CSS :not 伪类选择器。

$(this).parent().siblings().not(".divider").addClass("transparent");

另外，最好使用.addClass和.removeClass。

编辑：

jQuery不好用，使用DOM ;)

link.addEventListener("click", function addClasses() {
    var li = this.parentNode,
        lis = li.parentNode.children;

    [].forEach.call(lis, function addClassIfCorrect(el) {
        var classList = el.classList
        if (el !== li && !classList.contains("divider")) {
            classList.add("transparent");
        }
    });
});

- Raynos

---

jQuery推荐使用.not()方法。 - heymrcarter

@Kalinga 它可以在除了IE之外的所有现代浏览器上运行。它可以使用DOM shim进行shimmed。 - Raynos

Answer 2

您可以在调用siblings时排除divider类：

$(this).parent().siblings(':not(.divider)').attr("class", "transparent");

- Matt