jQuery - 부모의 하위 요소를 선택하는 방법?

Question

제목이 정확하지 않은 경우 죄송합니다. 단어를 입력하는 방법을 모르겠습니다.

나는 같은 클래스 <div class="widget"></div> 여러 위젯이 -이 같은 구조 각각의 위젯 제목을 가지고 있으며, 내용 :

<div class="widget"> 
    <div class="widget-title">Title</div> 
    <div class="widget-content">Content Here</div> 
</div> 

은 "위젯 컨텐츠가"숨겨져

, 당신은 위젯을 클릭하면 -title이면 내용이 나타나고 클래스가 widget-title에 적용되어 "widget-title open"으로 변경됩니다. 이 부분은 find를 사용하고 widget-content도 열립니다.

문제는 모든 위젯에서 위젯 컨텐츠를 여는 것입니다. 제목이 클릭 된 특정 위젯에서만 위젯 컨텐츠를 열어야합니다. 올바른 구문이 무엇인지 모르겠으므로 사용자가 제목을 클릭하는 특정 위젯의 위젯 컨텐츠 만 열립니다.

$('.widget').find('.widget-title').click(function() { 
    $('.widget-content').show('slow', function() { 
    // Animation complete. 
    }); 
    $('.widget').find('.widget-title').addClass("open"); 
}); 

누군가가 작업 예제를 제공 시겠어요 : 여기

내가 지금까지 가지고있는 코드는? 감사합니다

Answer 1

$('.widget .widget-title').click(function() { 
    $(this) 
     .addClass("open") 
     .parent().find('.widget-content').show('slow', function() { 
      // Animation complete. 
     }); 
}); 

Answer 2

.children()http://api.jquery.com/children/

내가 당신을 이해한다면 완전히 잘 모르겠지만,이 당신을 도울 수 있습니다.

Answer 3

난 당신이 원하는 생각 :

$('.widget').find('.widget-title').click(function() { 
    $(this).parent().show('slow', function() { 
     // Animation complete. 
    }).addClass("open"); 
}); 

그것은 선택한 .widget-title 요소의 부모를 엽니 다.

Answer 4

$('div.widget-title').click(function() { 
var el = $(this); 
el.addClass('open');siblings('div.widget-content').show('slow',function() { 
    //animation complete 
}); 
}); 

당신은 현재의 DOM 요소를 참조하는 '이'키워드를 사용하여 컨텍스트에 콜백 기능을 유지해야합니다. 그렇지 않으면 콜백 내에 widget-title 클래스로 모든 DOM 요소를 가져 오는 것입니다.

Answer 5

클래스로 선택하면 jquery는 해당 클래스의 모든 멤버를 선택합니다. 이 특정 위젯 또는 상위 컨테이너에 ID 또는 속성을 설정할 수 있습니까?

Answer 6

이 시도 :

내가 오늘 같은 문제가 없었다

$('.widget-title').click(function() { 
    $(this).parent('.widget').children('.widget-content').show('slow', function() { 
    $(this).addClass('open'); 
    }); 
}); 

Answer 7

, 여기 $ ('# 부모> childNode에') 빠른 솔루션이었습니다; http://api.jquery.com/child-selector/