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

最後になりましたが、jQueryをネイティブJSに置き換えたい場合は、 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 に答える