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 might select the text content next to the element，因此您可能需要使用：

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。

Answer 2

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

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

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

3 个答案: