web-dev-qa-db-ja.com

Javascriptで要素の次の兄弟を非表示にする

document.getElementById('the_id')から取得した要素があります。どうすれば次の兄弟を取得して非表示にできますか？私はこれを試しましたが、うまくいきませんでした：

elem.nextSibling.style.display = 'none';

Firebugエラーはelem.nextSibling.style is undefined。

javascriptelementhidesiblings
13
DisgruntledGoat

これは、Firefoxが要素ノード間の空白をテキストノードと見なしているため（IEはそうではない）、したがって.nextSibling要素で、Firefoxでそのテキストノードを取得します。

次の要素ノードを取得するために使用する関数があると便利です。このようなもの

/* 
   Credit to John Resig for this function 
   taken from Pro JavaScript techniques 
*/
function next(elem) {
    do {
        elem = elem.nextSibling;
    } while (elem && elem.nodeType !== 1);
    return elem;        
}

その後、あなたはすることができます

var elem = document.getElementById('the_id');
var nextElem = next(elem); 

if (nextElem) 
    nextElem.style.display = 'none';
34
Russ Cam

Element Traversal API を見てください。このAPIは、Elementノード間でのみ移動します。これにより、次のことが可能になります。

elem.nextElementSibling.style.display = 'none';

したがって、要素以外のノードを取得する可能性があるnextSiblingに固有の問題（空白を保持するTextNodeなど）を回避できます。

11
cobaco

Firebugエラーはelem.nextSibling.styleが未定義でした。

nextSiblingはテキストノードまたは他のノードタイプである可能性があるため

do {
   elem = elem.nextSibling;
} while(element && elem.nodeType !== 1); // 1 == Node.ELEMENT_NODE
if(elem) elem.style.display = 'none';
2
Rafael

次のようなものを使用して、この要素の子をループしてみてください。

var i=0;
(foreach child in elem)
{
   if (i==0)
   {
     document.getElementByID(child.id).style.display='none';
    }
}

構文を適切に修正してください。

0
Rahul