jQuery로 동적 요소를 숨기는 적절한 방법

Question

내 코드가 동적 링크로 채울 div 요소가 있습니다. jquery를 사용하여 첫 번째 링크를 제외한 모든 링크를 숨기려고합니다. 이것은 내가 무엇을 최대 온이며이 그것을 할 수있는 최선의 방법 인 경우 난 그냥 궁금 해서요, 작동 :

$("#panelContainer").each(function(n) { 
    $(this).children().hide(); 
    $("#panelContainer a:first").show(); 
}); 

Answer 1

당신은 다음과 같이 단축하고 :gt() (greater than) selector를 사용하여 최대 조금을 속도를 높일 수는 :

$("#panelContainer :gt(0)").hide(); 

이것은 아이들이 만 링크에 영향을 미칠 필요 및 기타 요소가있는 경우 a:gt(0)를 사용, 질문의 경우로 보인다 모든 앵커, 가정합니다.

더 짧아서 ... 짧습니다. 부모를 한 번 선택하고 자식을 한 번만 필터링하고 부모, 자식, 부모 대신 필터를 사용하고 하위 항목을 필터링하기 때문에 속도가 빨라집니다. 또한 원본과 마찬가지로 자바 스크립트가 사용 중지 된 경우 모든 링크가 표시됩니다. a 요소를 동적으로 추가되기 때문에

Answer 2

$("#panelContainer a:not(:first-child)").hide(); 

, 그 다음 첫 번째 (이 응용 프로그램의 의도로 작동하는 경우)를 보여, 숨겨진 요소로 추가하는 것이 도움이 될 수 있습니다.

다음은 초기 상태가 숨겨져 있다고 가정합니다.

$("#panelContainer a:first-child").show(); // Instead of hiding many, 
              // you could show one. 

Answer 3

examples here에는 몇 가지 CSS 만 있습니다. 셀렉터 호환성에 대한 내용은 quirksmode입니다. hide() 함수뿐만 아니라 jQuery의 선택기로 사용할 수 있습니다.

N + 2 번째 자녀와 함께

#panelContainer > a + a { 
    display:none; 
}​ 

@patrick, 첫 번째

#panelContainer > :not(:first-child) { 
    display: none; 
} 
​ 

를 제외한 모든 자식 노드 첫 번째 자식 앵커 후 올

#panelContainer :nth-child(n+2) { 
    display: none; 
} 

모든 앵커 시작

이 수퍼 크로스 브라우저 방법을 제안 해 주신 @patrick에게 다시 한 번 감사드립니다. 먼저 모든 링크를 숨긴 다음 첫 번째 링크를 표시하십시오.

#panelContainer > a { 
    display: none; 
} 

#panelContainer > a:first-child { 
    display: inline; 
}