JavaScript로 요소의 다음 형제를 숨기십시오

Question

나는 요소가 잡힌 요소가 있습니다 document.getElementById('the_id'). 다음 형제 자매를 얻고 숨길 수있는 방법은 무엇입니까? 나는 이것을 시도했지만 작동하지 않았다 :

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

소방대 오류가 발생했습니다 elem.nextSibling.style is undefined.

Answer 1

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

Answer 2

살펴보십시오 요소 트래버스 API, 그 API는 요소 노드들 사이에서만 움직입니다. 이것은 다음을 허용합니다.

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

따라서 잠재적으로 비 원소 노드를 얻는 Nextibling에 내재 된 문제를 피합니다 (예 : TextNode Holding Whitespace).

Answer 3

Firebug 오류는 Elem.nextibling.style이 정의되지 않았습니다.

Nextibling은 텍스트 노드 또는 기타 노드 유형 일 수 있으므로

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

Answer 4

다음과 같은 것을 사용 하여이 요소의 어린이를 통해 반복 해보세요.

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

구문을 적절히 수정하십시오.