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 ,我建议看看Palash的回答$.each().