jQuery .prev()的纯javascript替代品？

Question

我有这个jQuery代码:

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

我需要一个纯JavaScript等同,因此我可以选择前一个兄弟ONLY如果选择匹配(在这种情况下.sub-block-container).

例如,假设我有一个列表,列表中的每个项目都有一个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";
    }
}