부모와 부모의 형제를 선택하는 방법

부모와 부모의 형제를 선택하는 방법

---

이 코드가 있습니다.

$("#test").siblings('p').remove();
$("#test").remove();

이 코드를 보강하는 대신 보강하는 방법?

---

이 경우 addBack () 을 사용합니다 .

$("#test").siblings('p').addBack().remove();

---

편집하다

jQuery 버전 1.8-을 사용 하는 경우 더 나은 버전, 버전 인 andSelf () 를 사용할 수 addBack()있습니다.

둘째, 모두 end와 addBack이 경우 동일한 작업을 수행하지만, 실제로 다른 관점 야합니다. 이 HTML을 사용합니다.

<div class="grandpa">
    <div class="dad">
        <div class="son">
            Test
        </div>
    </div>
</div>

우리가 사용하는 경우 end():

$('.grandpa')
    .find('.dad')
        .find('.son')
        .addClass('youngster')
        .end()
    .addClass('adult')
    .end()
.addClass('oldster');

결과는 다음과 가변적입니다.

<div class="grandpa oldster">
    <div class="dad adult">
        <div class="son youngster">
            Test
        </div>
    </div>
</div>  

그래서 우리가 end()위해 를 사용할 때 우리 son는 jQuery를 son에게 부모 세트 로 돌아가서 dad클래스를 추가 해야 우리한다고 말하고 있습니다 adult.

그러나 우리가 사용할 때 addBack:

$('.grandpa')
    .find('.dad')
        .find('.son')
        .addClass('youngster')
        .addBack()
        .addClass('adult')
        .addBack() // This simply do nothing since `addBack` is not traverse up DOM element 
        .addClass('oldster');    

결과는 다음과 가변적입니다.

<div class="grandpa">
    <div class="dad adult oldster">
        <div class="son youngster adult oldster">
            Test
        </div>
    </div>
</div>

우리는 호출 그래서 할 때 addBack에 son우리가 밀어 jQuery를를 이야기하고, dad그리고 son새로운 클래스를 같은 방에와 추가 adult및 oldster둘 다에.

---

이 end()방법은 주로 jQuery의 연결 속성을 이용할 때 유용합니다. 연결을 사용하지 않을 필요가 일반적으로 object변수 이름으로 이전 을 호출 할 수 있으므로 스택을 조작 할 수 없습니다.

새로운 요소 집합은 object. 각 연속 필터링 방법은 스택에 새 요소 세트를 푸시합니다. 이전 요소 집합이 필요한 경우 end()스택에서 다시 집합을 팝하는 데 사용할 수 있습니다 .

나는 .end()추측 한다 .

$("#test").siblings('p').remove().end().remove();

바이올린을 사용할 수 있습니다

---

몇 가지 설명 :

이제 위의 코드 조각에서 무슨 일이 일어나고 있는지 :

다음 HTML 마크 업을 가정하십시오.

<div id='container'>
   <div id='test'>This is supposed to be removed.</div>
   <p>And this to be removed too.</p>
</div>

펼쳐지는 실행될 때 :

$("#test").siblings('p').remove()

이 블록은 <p>뷰에서 형제 항목 을 제거하고 마크 업은 다음과 같이 업데이트됩니다.

<div id='container'>
   <div id='test'>This is supposed to be removed.</div>
</div>

그리고 우리가 그것을 연결하면 .end()

$("#test").siblings('p').remove().end()

#testdiv 의 스택으로 돌아 가면 펼쳐지는 다음 부분이 실행됩니다.

$("#test").siblings('p').remove().end().remove();
                             //--^^^^^^^^^^^^^^^----this next part

와 #test뷰에서 제거하고 최종 마크 업 출력은 같은 것입니다 :

<div id='container'>
</div>

---

주제를 벗어난 수 있습니다. 문제의 관점을 설명 할 수 있습니다.

$("#test, #test ~ p").remove(); // !! incorrect way, see comment below

얘들 아 미안해 :( 내 결정이 틀렸어 !!

선택기 ' ~ '는 ' 형제 '-방법 과 같지 않습니다 . ' ~ '를 선택 모든 형제 ' p는 '그 후속 -elements AFTER ' #test '요소를.

그래서 나는 또 다른 결정을 제안합니다.

$("#test, > p", $('#test').parent()).remove();

우아하지는 않지만 가장 빠른 방법입니다. ' http://jsperf.com/how-to-chain-this-code-stackoverflow-16009101 '을 확인하십시오.

성능 테스트 결과 :

추신 http://jsfiddle.net/Dpe59/

---

질문에 대한 의견에 동의해야합니다. 가독성과 유지 관리를 위해 andSelf다음을 사용하십시오 .

$("#test").siblings('p').andSelf().remove();

불행히도 더 이상 사용되지 않습니다. 그러나 우리처럼 이전 버전의 jquery를 사용하고 있다면 그만한 가치 가 있습니다.

---

$("#test").siblings("p").siblings("#test").remove();

---

$("#text").siblings('p').remove().prevObject.remove();

편집 : 작동하지만이 작업을 수행하지 마십시오. Matt의 의견에 따르면 prevObject문서화되지 않았습니다.

---

이 시도 :

$("#test").siblings('p').addBack().remove();

참조 URL : https://stackoverflow.com/questions/16009101/how-to-select-an-elements-parent-and-the-parents-siblings