여러 개의 선택기에서 동일한 작업을 우아하게 수행 할 수 있습니까?

Question

제가 작업하고있는 프로젝트에서 저는 약간의 JavaScript 객체를 작성했습니다. 그 행동 중 하나는 같은 클래스의 일련의 자식을 제거하는 것을 포함한다 :이보다 쉽게 ​​유지 보수로 수정하는 몇 가지 방법이 있지만

는

function Foo() { 
    var $a = $('.a'), 
     $b = $('.b'), 
     // ...etc... 
     $n = $('.n'); 

    $a.remove(); 
    $b.remove(); 
    // ...etc again... 
    $n.remove(); 
} 

(하나의 배열로 선택기 퍼팅이 마음에 즉시 온천) 선택기의 일련의 .remove() 작업을 수행 할 수있는 우아한 방법이 있다면, 나는 같은, 궁금 해요 : 따라서

function FooPrime() { 
    var selectors = [ 
     '.a', 
     '.b', 
     // ... 
     '.n' 
    ]; 

    // Perform remove on all given selectors? 
    $(selectors).remove(); 
} 

, 질문을 : 나는에 하나의 jQuery 작업을 수행 할 수있는 방법에는 어떤 것들이 선택자의 수?

EDIT : here은 문제 컨텍스트의 컷 다운 버전을 표시하는 JSFiddle입니다.

Answer 1

DOM을 보여 주셔서 감사합니다. 여러 클래스를 요소에 추가하고 대상 요소에 대한 특정 클래스를 만들 때 선택할 수있는 큰 클래스 목록을 만들지 말고 다른 요소와의 연결을 통해 대상을 지정해야합니다 . 이것은 더 깨끗하고 효율적인 방법 일 것입니다. 협회

---

기본적으로 선택을 위해 난 그냥이 있습니다

$("#test-callout").find("div").not(".callout-main").remove(); 

Fiddle

이것은 당신이 .callout-main하고 외에 DIV 년대 다른이없는 것으로 가정 타겟 div는 test-callout입니다. 선택기 체인을 수정하면 조금씩 수정할 수 있습니다. 이렇게 될

function calculateArrow() { 
    var arrowClass; 
    if(pub.isLeft) { 
     arrowClass = 'callout-arrow-left'; 
    } else { 
     arrowClass = 'callout-arrow-right'; 
    } 

    pub.$callout.append('<div class="' + arrowClass + '"></div>'); 
} 

것은 그것을 수정 : 다른 클래스를 추가하여

---

는

귀하의 화살표 생성 코드는 다음과 같이이었다

function calculateArrow() { 
    $arrow = $("<div>") 
    .addClass("callout-arrow") 
    .addClass(pub.isLeft ? "callout-arrow-left" : "callout-arrow-right");   
    pub.$callout.append($arrow); 
} 

그런 다음 선택이 할 수있는 간단히 :

Fiddle

---

당신이 완전한 리팩터링에 관심이 있다면

$("#test-callout").find(".callout-arrow").remove(); 

- 난 53 17 라인에서 CalloutObject 감소하고 여전히 동일하게 작동합니다.

Fiddle

Answer 2

쉼표로 선택기를 분리 할 수 ​​있습니다 :

$(selectors.join(',')).remove(); 

쉼표 바로 일반 CSS 선택기 구문에 그 목적이있다.