3

我有这个代码：

$.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()项目设置，而不是这个，我该怎么做？

谢谢你。

4

3 回答 3

12

试试这个：

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()

于 2013-01-07T14:14:28.857 回答
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';
于 2013-01-07T14:15:43.077 回答
2

你也可以试试这个：

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';
     }
}
于 2013-01-07T14:37:05.313 回答