jQuery's next()的原生JavaScript替代方案

Native JavaScript alternative for jQuery's next()

本文关键字：原生 JavaScript 方案 next jQuery      更新时间：2023-09-26

我有这样的代码:

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

谢谢。

试试这个:

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的答案。

您可以使用所选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';

你也可以试试这个:

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';
     }
}
相关文章：