jQuery 중첩 클래스 선택기

Question

현재 사용하고있는 jQuery 스크립트에서 작지만 이상한 문제를 파악하려고합니다. 이, 실행하는 스크립트가 잘 작동하지만 작은 변화를 할 때 (아래의 HTML을 체크 아웃) 이하 나는 HTML로이 스크립트

(function($, undefined) { 
$(document).ready(function() { 
    var $container = $(".update_content"); 

    $container.find(".social_media_updates_extended_view").hide(); 

    $container.delegate(".update_extend .btnFadeIn", "click", function(event) { 
     var $view = $(this).closest(".wrapper_update_extend").prev(".social_media_updates_extended_view").stop(true).fadeToggle(200); 

     $container.find(".social_media_updates_extended_view").not($view[0]).stop(true).fadeOut(200); 
    }) 
}) 
})(jQuery); 

을 사용하고 http://jsfiddle.net/nRD4L/12/

: 현재 문제와 스크립트를 볼 수 있습니다 HTML strcuture의 변경으로 인해 작동하지 않습니다.

<div class="wrapper_update"> 
<div class="update_content"> 
    <div class="social_media_updates_extended_view"> 
     <p>Karel de Bruin</p> 
    </div> 
    <div class="wrapper_update_extend"> 
     <div class="update_extend"> 
      <span class="btnFadeIn">fade button span</span> 
     </div> 
    </div> 
</div> 

html로 위의 잘 작동하지만 지금은 DIV의 .wrapper_update_extend이 div.update_content 내에 있지 않기 때문에 HTML 아래 작동하지 않습니다.

<div class="wrapper_update"> 
<div class="update_content"> 
    <div class="social_media_updates_extended_view"> 
     <p>Karel de Bruin</p> 
    </div> 
    <p>content</p> 
</div> 
<div class="wrapper_update_extend"> 
    <div class="update_extend"> 
     <span class="btnFadeIn">fade button span</span> 
    </div> 
</div> 

는 그래서 클래스 .update_content witihin 클래스 .social_media_updates_extended_view을 찾을 수있는 스크립트를 조금 변경해야합니다.

누구나 팁이 있습니까?

Answer 1

Here 작업 예제 (또는 $('body')에 당신은 더 나은 하나 찾을 수없는 경우). 그러나 나는 왜 당신이 당신의 내용의 구조를 바꾸고 싶어하는지 확신 할 수 없다.

Answer 2

당신이 코드는 몇 가지 가정 : 당신이 원하는

모든 .update_content을 받고있다.

.wrapper_update_extend 앞에는 .social_media_updates_extended_view이 표시됩니다.

아래 코드로 두 가지를 모두 해칩니다. 코드에서 두 번째로 원하는 것을 말할 수 없으므로이를 개선하는 방법을 나타낼 수 없습니다. 두려워합니다.

Answer 3

설정 적절한 선택에 $container는

Answer 4

여기는 작동하는 jsfiddle입니다. http://jsfiddle.net/YsMwj/
는 그때

var $view = $(this).closest(".wrapper_update_extend").prev(".update_content").children(".social_media_updates_extended_view").stop(true).fadeToggle(200); 

에

var $view = $(this).closest(".wrapper_update_extend").prev(".social_media_updates_extended_view").stop(true).fadeToggle(200); 

에서 $view 대해 셀렉터를 변경

var $container = $(".wrapper_update"); 

에

var $container = $(".update_content"); 

컨테이너에서 변경