programing

jquery, ID 내 클래스 선택기

randomtip 2023. 8. 29. 22:39
반응형

jquery, ID 내 클래스 선택기

아래에서 클래스를 포함하는 요소를 선택하는 방법my_class와 같은 범위 내에서id = "my_id"?

요소에 선택하지 않은 다른 클래스가 있을 수도 있습니다.

<div id = "my_id">
    <span class = "my_class hidden">hi</span>
    <span class = "my_class">hello</span>
</div>

노력하고 있었습니다.

$("#my_id [class*=my_class ]")

클래스 선택기와 하위 선택기를 함께 사용할 수 있습니다.

$("#my_id .my_class")

그냥 플레인올 클래스 선택기를 사용하세요.

$('#my_id .my_class')

요소에 다른 클래스도 있는지 여부는 중요하지 않습니다..my_class 클래스가 있으며 #my_id 내부에 있으므로 선택기와 일치합니다.

성능 관련

jQuery 셀렉터 성능 설명서에 따르면 다음과 같이 두 개의 셀렉터를 개별적으로 사용하는 것이 더 빠릅니다.

$('#my_id').find('.my_class')

설명서의 관련 부분은 다음과 같습니다.

ID 기반 선택기

// Fast:
$( "#container div.robotarm" );

// Super-fast:
$( "#container" ).find( "div.robotarm" );

.find()첫 번째 선택은 Sizzle Selector 엔진을 거치지 않고 처리되므로 접근 속도가 더 빠릅니다. ID 전용 선택은 다음을 사용하여 처리됩니다.document.getElementById()브라우저에 기본으로 제공되므로 매우 빠릅니다.

ID 또는 클래스만으로 선택하면 다음과 같은 브라우저 제공 기능이 호출됩니다.document.getElementById()는 상당히 빠른 반면 하위 선택기를 사용하면 언급된 대로 Sizzle 엔진이 호출되며, 이는 빠르지만 제안된 대안보다 느립니다.

항상 사용

//Super Fast
$('#my_id').find('.my_class'); 

대신에

// Fast:
$('#my_id .my_class');

JQuery 성능 규칙을 확인합니다.

Jquery Doc에서도

또한.$( "#container" ).find( "div.robotarm" );
다음과 같습니다.$( "div.robotarm", "#container" )

선택만 해달라는 것 같습니다.<span class = "my_class">hello</span>이 요소, 당신은 이렇게 해야 합니다, 만약 내가 당신의 질문을 정확하게 이해한다면, 이것이 답입니다.

$("#my_id [class='my_class']").addClass('test');

DEMO

find()를 사용할 수 있습니다.

$('#my_id').find('.my_class');

또는 다음과 같습니다.

$('#my_id').find('span');

두 가지 방법 모두 원하는 작업에 적합합니다.

언급URL : https://stackoverflow.com/questions/17417614/jquery-selector-for-class-within-id

반응형