本地JavaScript替代的jQuery的next（）

我有這樣的代碼：本地JavaScript替代的jQuery的next（）

$.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()項目，而不是這一項，我該怎麼做？

謝謝。

來源

2013-01-07 MyMomSaysIamSpecial

的[獲取使用Javascript的下一個/上一個元素]可能重複（HTTP：/ /stackoverflow.com/questions/574904/get-next-previous-element-using-javascript） –

試試這個：

item.nextSibling.style.display = 'none'

記住nextSiblingmight 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';

最後但並非最不重要的，我建議你在看看Palash' answer如果你想更換jQuery的與原生JS的$.each()。

來源

2013-01-07 14:14:28 Cerbrus

注意，這需要所有節點類型考慮進去，所以你可能會得到意外的結果，如果有一個文本節點（或評論，或一些其他非元素節點）在第一個元素之後。 'nextElementSibling'是這項工作的正確工具，但不幸的是並不是無處不在。 –

@FrédéricHamidi：增加了一個替代方案。 – Cerbrus

請降低我的人請解釋爲什麼？如果我做了一個msitake，我想從中學習。 – Cerbrus

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

來源

2013-01-07 14:15:43 Bergi

你也可以試試這個：

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-07 14:37:05

本地JavaScript替代的jQuery的next（）

回答

相關問題