development

jQuery의 다중 선택기 체인?

big-blog 2020. 12. 10. 20:48
반응형

jQuery의 다중 선택기 체인?


일반적으로 클래스를 선택기로 사용할 때 "id"선택기를 사용하여 전체 페이지를 검색하지 않고 클래스가있는 영역 만 검색합니다.

그러나 코드가 포함 된 부분보기가 있습니다. 이 부분보기 (공통 코드)는 양식 태그를 둘러 쌉니다.

나는 가지고있다:

<form id="Create">
// load common code in from partial view
</form>

<form id="Edit">
// load common code in from partial view
</form>

이제이 공통 코드에서 플러그인을 여러 필드에 연결해야하므로

$('#Create .myClass').plugin({ options here});

$('#Edit .myClass').plugin({options here});

따라서 거의 동일한 코드입니다. 이드 중 하나를 찾는 방법이 있는지 궁금합니다.

편집하다

선택자에 대한 변수가있을 때 문제가 있습니다.

    my.selectors = 
    {
        A: '#Create',
        B: '#Edit',
        Plugin: ' .Plugin' 
    };

 $(selector.A+ selectors.Plugin, selector.B+ selectors.Plugin)

실행되지 않는 것 같습니다.


여러 선택기를 쉼표로 결합 할 수 있습니다.

$('#Create .myClass,#Edit .myClass').plugin({options here});

또는 여러 가지를 포함 할 경우 모든 양식 요소에 클래스를 추가 한 다음 해당 클래스 내에서 검색 할 수 있습니다. 이것은 검색을 제한함으로써 예상되는 속도 절감 효과를 얻지 못하지만 솔직히 내가 당신이라면 그것에 대해 너무 걱정하지 않을 것입니다. 브라우저는 일반적인 작업을 최적화하기 위해 많은 멋진 작업을 수행합니다. 간단한 클래스 선택기가 더 빠를 수 있습니다.


$("#Create").find(".myClass").add("#Edit .myClass").plugin({});

$.fn.add두 세트를 연결하는 데 사용 합니다.


다음을 사용할 수 있어야합니다.

$('#Edit.myClass, #Create.myClass').plugin({options here});

jQuery | 다중 선택기


이 방법으로 수행하면 약간 더 나은 성능을 볼 수 있다고 생각합니다.

$("#Create, #Edit").find(".myClass").plugin(){
    // Options
});

처럼:

$('#Create .myClass, #Edit .myClass').plugin({ 
    options: here
});

여러 선택기를 지정하여 단일 결과로 결합 할 수 있습니다. 이 다중 표현식 결합기는 서로 다른 요소를 선택하는 효율적인 방법입니다. 반환 된 jQuery 객체의 DOM 요소 순서는 문서 순서이므로 동일하지 않을 수 있습니다. 이 결합 자의 대안은 .add () 메서드입니다.


여기에는 이미 매우 좋은 답변이 있지만 다른 경우 (특히 이것이 아님)에서는 map을 사용하는 것이 "유일한"솔루션이 될 수 있습니다.

특히 표준 표현식이 아닌 정규 표현식을 사용하고 싶을 때.

이 경우 다음과 같습니다.

 $('.myClass').filter(function(index, elem) {
    var jElem = $(elem);

    return jElem.closest('#Create').length > 0 || 
           jElem.closest('#Edit').length > 0;

}).plugin(...);

이전에 말했듯이 여기서이 솔루션은 쓸모가 없지만 추가 문제에 대해서는 매우 좋은 옵션입니다.

참고 URL : https://stackoverflow.com/questions/5736811/multiple-selector-chaining-in-jquery

반응형