Question

我有这个jQuery代码：

$(".q-block-container").prev(".sub-block-container").css("border-bottom","none");

我需要一个纯JavaScript等价物，如果它匹配选择器（在这种情况下是.sub-block-container），我可以选择之前的兄弟 ONLY 。

例如，假设我有一个列表，列表中的每个项目都有border-bottom样式。根据兄弟在特定列表项之前的含义，应该确定是否应该应用边框：

<ul>
    <li class="q"></li>
    <li class="q"></li>
    <li class="q"></li>
    <li class="s"></li>
    <li class="s"></li>
    <li class="q"></li>
    <li class="s"></li>
    <li class="q"></li>
</ul>

在此示例中，如果出现以下情况，则必须不在上一个同级<li>元素上显示边框：

元素为q且前一个兄弟是s
元素是s，前一个兄弟是q
元素是s，前一个兄弟是s

Answer 1

如果您的元素.sub-block-container只有该单个类，请尝试此操作。

var elem = document.getElementsByClassName("q-block-container");
for (i=0; i<elem.length; i++) {
    var prev = elem[i].previousElementSibling;
    if (prev.className == "sub-block-container") {
        prev.style.borderBottom = "none";
    }
}

如果您的元素可能包含多个类，请改用：

var elem = document.getElementsByClassName("q-block-container");
for (i=0; i<elem.length; i++) {
    var prev = elem[i].previousElementSibling;
    if (prev.classList.contains("sub-block-container")) {
        prev.style.borderBottom = "none";
    }
}

Answer 2

也许试试这个：

if (!Element.prototype.matches) {
    Element.prototype.matches = 
        Element.prototype.matchesSelector || 
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector || 
        Element.prototype.oMatchesSelector || 
        Element.prototype.webkitMatchesSelector ||
        function(s) {
            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                i = matches.length;
            while (--i >= 0 && matches.item(i) !== this) {}
            return i > -1;            
        };
}

var elements = document.querySelectorAll('.q-block-container');

for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    var previous = element.previousElementSibling;
    if(previous.matches('.sub-block-container')){
        previous.style.borderBottom = 'none';
    }
}

所以这很简单，你遍历所有的.q-block-container，如果你以前的兄弟与.sub-block-container选择器匹配，它会改变它的border-bottom

编辑：

感谢Abraham Murciano Benzadon指出代码中的错误（JS tho中不需要使用冒号，但最好保持相同的代码风格）

编辑2：

将代码修改为您想要的内容

jQuery .prev（）的纯javascript替代品？

2 个答案: