jquery를 사용하여 항목 목록의 내용 표시

Question

저는 JQuery를 처음 사용하며 문제에 대한 도움을 많이 원합니다. 특정 링크를 클릭하면 확장 및 축소하려는 일부 콘텐츠가있는 div가 있습니다. 같은 그 뭔가 :

<div class="container"> 
<div class="cont-top"> 
<a class="morelink" href="#">More</a> 
</div> 
<div class="cont-btm"> 
<p>This is the content to be displayed</p> 
</div> 
</div> 

문제는이 컨테이너 사업부는 PHP 루프에 의해 동적으로 생성된다. 이 div의 단일 인스턴스를 열기 위해 jquery를 작성하려면 어떻게해야합니까? 여기에 내가 가지고있는 것, 그것이 작동하지만 분명히 클릭 한 사람뿐만 아니라 모든 div를 여는 것입니다.

$('.cont-btm').hide(); 
$('.morelink').click(function(e) { 
e.preventDefault(); 
$('.cont-btm').toggle('fast'); 
}); 

나는 이것이 간단한 질문이라는 것을 알고 있지만 프로그래밍에 익숙하지 않습니다.

Answer 1

당신은 next 방법을 사용할 수 있습니다 :

$('.cont-btm').hide(); 
$('.morelink').click(function(e) { 
    e.preventDefault(); 
    // get the parent of the link and then get the next .cont-btm after the parent. 
    $(this).parent().next('.cont-btm').toggle('fast'); 
});​ 

샘플 바이올린 :

$('.moreinfo').click(function(e) { 
    e.preventDefault(); 
    $(this).parent().next('.cont-btm').toggle('fast'); 
}); 

Answer 2

http://jsfiddle.net/johnkoer/EGzCE/6/ :

$('.cont-btm').hide(); 
    $('.morelink').click(function(e) 
    { 
     e.preventDefault(); 
     $(this).parent().next().toggle('fast'); 
    }); 

Answer 3

변경과 같이 코드 : 당신은, 사업부에 대한 상대 이송을 사용하므로 같은 수

Answer 4

이 div에 클래스 이름 (또는 id)을 추가 할 수없는 경우 페이지에있는 숫자 요소를 찾을 수 있습니까? 즉, 첫 번째, 두 번째, 세 번째 등 div입니까? 그렇다면 jQuery의 의사 선택기를 사용하여 div를 가져올 수 있습니다. 예 : nth-child는 좋은 것입니다. 숫자를 찾을 수 없다면 고유 한 식별자가 없기 때문에 divs 콘텐츠의 HTML 문자열을 비교 한 다음 일치하는 이벤트 핸들러를 수행하는 것과 같이 매우 단호한 방법을 거치지 않고는이 작업을 수행 할 수 없습니다 . 열쇠는 그 요소를 어떤 식 으로든 독특하게 만드는 것입니다.