jquery를 이름으로 생성 한 후에 참조 된 요소를 참조 하시겠습니까?

Question

요소를 참조하고 DOM에 추가하는 jQuery 객체를 몇 개 만듭니다. 나는 이름으로 그들을 참조 할 수 있기를 바란다. 그래서 그들에게 이벤트를 묶는 셀렉터들을 사용할 필요가 없다. 나는 "닫기"버튼을 클릭하고 "래퍼"를 숨길 수 있도록하려면

<div class="body> 

</div> 

$(document).ready(function(){ 
     wrapper = $("<div />") 
      .addClass("wrapper") 
      .click(function(e){ 
       if (e.target === this) 
        $(this).hide(); 
      }) 
      $('.body').wrap(wrapper); 

     close = $("<button />") 
      .addClass("close") 
      .text('CLICK TO CLOSE') 
      .click(function(e){ 
       ///HIDE ".wrapper" FROM HERE 
       $(wrapper).hide(); 
       ///HIDE ".wrapper" FROM HERE 
      }) 
      .prependTo($('.body')); 
}) 

JSFiddle Here

: 여기에 아래로 무식 예제 코드의 입니다. 내가 을 사용하여 그것을 숨길 수는 있지만 여러 래퍼가 될 것이므로 하나만 대상으로해야합니다. 나는 $(this).closest('.wrapper').hide()를 사용할 수 있었지만 이제는 지저분 해지고 있습니다. "추가"코드를 모두 피하기 위해 "닫기"내에서 "래퍼"변수를 참조하는 방법이 있습니까?

Answer 1

나는이 문제가 click 함수의 범위와 관련이 없다는 것을 알았습니다. wrap() 함수가 어떻게 작동하는지 알았습니다. jQuery .Wrap()을 사용하면 지정된 요소를 중심으로 구조체의 복사본을 래핑하고 원본을 세트로 반환합니다.이 경우에는 참조가 손실됩니다. 그래서 .body를 래핑하는 대신 단순히 시체가 '.replaceWith'를 사용하여 래퍼를 추가하고 본체를 본질적으로 .wrap()하지만 내 방식으로 추가했습니다. 이것은 단지 나를 사용하여 래퍼를 숨기고 작업했습니다.

wrapper.hide() 

매우 깨끗합니다.

전체 코드 :

$(document).ready(function(){ 
     $body = $('.body'); 
     wrapper = $("<div />") 
       .addClass("wrapper") 
       .click(function(e){ 
        if (e.target === this) 
         $(this).hide(); 
       }) 
       $body.replaceWith(wrapper) 
       wrapper.append($body); 

     close = $("<button />") 
       .addClass("close") 
       .text('CLICK TO CLOSE') 
       .click(function(e){ 
        wrapper.hide(); 
       }) 
       .prependTo($('.body')); 
}) 

작업 바이올린 : https://jsfiddle.net/1s9o198a/

Answer 2

래퍼 변수를 만들면 여전히 jQuery object입니다. 할당과 동시에 랩핑을 수행하십시오. 실제로는 DOM에서 무언가가되고 숨길 수 있습니다.

this 피들을 참조하십시오.

(function ($) { 
    "use strict"; 
    $(document).ready(function() { 
     var wrapper = $(".body").wrap($("<div></div>") 
      .addClass("wrapper") 
      .click(function (e) { 
       if (e.target === this) { 
        $(this).hide(); 
       } 
      })); 

     $("<button></button>") 
      .addClass("close") 
      .text("CLICK TO CLOSE") 
      .click(function() { 
       $(wrapper.parent(".wrapper")).hide(); 
      }) 
      .prependTo($(".body")); 
    }); 
}(jQuery)); 

스크립트의이 버전은 this을 허용하는 예외 JSLint를 전달합니다.