jQuery로 작동하는 DOM 요소를 참조하는 팁

StackOverflow https://stackoverflow.com/questions/1817407

  •  08-07-2019
  •  | 
  •  

문제

jQuery (dom/traversing/selectors)로 요소를 참조하는 방법에 대한 조언이 필요합니다. 때로는 원하는 요소에서 ID를 설정하고이를 수행하기에 충분합니다.

$('#elementID').hide();

그러나 때로는 N 요소 목록으로 작업 할 때 일부 사람들이 다음과 같은 목록의 각 요소에 클래스를 첨부하는 것을 보았습니다.

<a class="selectMe" href="http://jquery.com/">jQuery1</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>

그런 다음 jQuery로 다음을 수행하십시오.

$('.selectMe').hide();

다른 일부는 동일하지만 rel 속성 등을 .. ..

다른 사람들은 이것이 너무 일반적인 일을합니다. 이것이 시나리오라면 :

<div id="MyID">
<span>Some Text Here</span><a href="http://jquery.com/">jQuery1</a>
</div>

앵커에 이벤트를 첨부하려면 다음과 같습니다.

$('#MyID a').show();

해당 Div 내부에는 단 1 개의 링크가 있다고 가정합니다.

여러분이 생각하는 것은 실제로 시나리오에 달려 있거나이를 수행하는 데 좋은 관행이 있습니다.

도움이 되었습니까?

해결책

가장 빠른 구성을 찾으십시오. ID가 가장 빠릅니다. 가장 작은 컨텍스트를 빨리 얻으십시오. DIV에서 ID를 사용한 다음 선택할 수도 있습니다. 가능하면 전체 DOM 검색을 피하십시오.

예를 들어, 클래스보다 클래스가있는 요소를 검색하는 것이 더 빠릅니다.

이 중 일부는 직관적이지 않습니다. STACKOVERFLOW의 몇 가지 예를보고 효과가있는 느낌을 얻으십시오.

예를 들어:

<div id='mydiv'>
<a class="selectMe" href="http://jquery.com/">jQuery1</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
</div>

그런 다음 선택을 수행하십시오 : (메모 당 편집)

$('#mydiv').children('a.selectMe').hide();

그런 다음 해당 컨텍스트 내에서만 링크에 대해 검색합니다.

메모 당 편집 :

다음과 같은 선택 구문에 대한 선호도가 있습니다.

 $('#mydiv').children('a.selectMe').hide();
 $('#mydiv > a.selectMe').hide();

jQuery에 대한 문서화에 대한 문서에 대한 일부 연구는 여기에 약간 모호합니다. "부모> 자식 반품 : 배열은"부모 "로 지정된 요소의"자식 "에 의해 지정된 모든 어린이 요소와 일치합니다. jQuery는 일치하는 각 요소 세트의 모든 고유 한 직계 어린이를 포함하는 요소 세트를 얻습니다. "

내 마음 속에 명확히해야 할 질문은 첫 번째 형태가 모든 어린이/손자를 반환하는지 또는 두 번째 형태가 나타내는 직계 자녀가 사실인지 여부입니다. 이 중 하나는 "선택기"형식이고 다른 하나는 "트래버스"의 형태이며, 나에게는 비슷한 기능적 작업이지만 정확히 같은 것은 아닙니다.

다른 팁

나는 그것이 상황에 달려 있다고 말하지만 Mark Schultheiss가 말했듯이, jQuery가 선택기를 실행하여 요소를 얻는 방법을 이해하는 데 도움이됩니다.

컨텍스트를 제공하지 않고 ClassName으로 선택하면 지원하지 않기 때문에 IE에서는 느리게 진행됩니다. getElementsByClassName. 이 기사를 참조하십시오 http://ejohn.org/blog/getelementsbyclassname-peed-comparison/. 요소 이름 (예 : div.className) 또는 검색을 이와 같이 더 작은 범위로 제한합니다. $('.class', '#myDiv')

속성 선택기도 마찬가지입니다. rel 속성 남용은보다 나쁩니다 class 속성 남용 브라우저에는 기본 검색 별 기능이 없기 때문에 속성 남용.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top