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

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";
    }
}