jQuery下一个（）的原生JavaScript替代品

Question

我有这个代码：

$.each(this.items, function(key, item) {
    item = $(item);
    item.css('background', 'red');
    item.next().css('display', 'none');
}

现在，我需要用纯JavaScript重写它，所以我这样做

document.getElementById(aItems[iCount].id).style.background = 'red';
document.getElementById(aItems[iCount].id).style.display = 'none';

问题是display:none必须为next()项设置，而不是这一项，我该怎么做？

谢谢。

Answer 1

尝试这个：

item.nextSibling.style.display = 'none'

请记住， nextSibling 可能会选择元素旁边的文本内容 ，因此您可能需要使用：

item.nextSibling.nextSibling.style.display = 'none'

---

另一个选择是使用nextElementSibling ，正如Bergi建议的那样。 但是，并非所有浏览器都支持这种功能。 您可以自己创建该功能：

function nextElementSibling(element) {
    do { 
        element = element.nextSibling;
    } while (element && element.nodeType !== 1);
    return element;
}

在这种情况下：

nextElementSibling(item).style.display = 'none';

---

最后但并非最不重要的，如果你想用本机JS取代jQuery的$.each() ，我建议你看看Palash的回答 。

Answer 2

您可以使用所选DOM节点的nextElementSibling属性 ：

var item = document.getElementById(aItems[iCount].id);
item.style.background = 'red';
item.style.display = 'none';
if (item.nextElementSibling)
    item.nextElementSibling.style.display = 'none';

Answer 3

你也可以试试这个：

for(var iCount = 0; iCount < aItems.length;i++)
{
     var current = aItems[iCount].id;
     var next = aItems[iCount + 1].id;
     if ( next != null ) {
          document.getElementById(current).style.background = 'red';
          document.getElementById(next).style.display = 'none';
     }
}