2011-04-22 7 views
0

나는 같은 클래스를 가진 다른 div에 의해 열린 페이지에있는 같은 클래스의 div를 여러 개 가지고있다. 한 번 div를 열려고 할 때마다 모든 div의 프로그램이 내가 수업을 사용하기 때문에 보여줍니다. 어떻게 모든 div를 표시하지 div 표시하려면 jQuery 쓸 수 있습니까?div와 show를 찾는다

<div class="account"> 
<div class="actions"> 
    <div><a href="" class="more">More Info</a></div> 
</div><!-- /actions --> 
<div class="info>This info would be show for more info</div> 
</div><!-- /account --> 

<div class="account"> 
<div class="actions"> 
    <div><a href="" class="more">More Info</a></div> 
</div><!-- /actions --> 
<div class="info>This info would be show for more info</div> 
</div><!-- /account --> 
+1

어떤 div를 표시하려고합니까? 당신이 벌써 뭘 했니? 당신의 자바 스크립트는 어떻게 생겼습니까? 조금 더 많은 정보가 먼 길을 갈 것입니다. – szeliga

+0

실용적인 코드인지는 모르겠지만, 닫는 따옴표가'class = "info>'에 없으므로 참고하시기 바랍니다. 결과에 버그가 생깁니다. –

답변

0

을 사용

$("a.more").click(function(){ 
    $(this).closest(".account").find(".info").toggle(); 
    return false; 
}); 

다른 많은 대답과의 차이점은 여기에 closest인데 선택기와 일치하는 가장 가까운 상위 항목을 찾습니다. 나는 이것이 미래의 마크 업 변경에 대해 가장 큰 유연성을 제공하기 때문에 .parent().parent().parent() 접근 방법을 선호한다. 내부에 컨테이너가 있고 내부에 .info이 있으면 좋은 것입니다.

0

이 시도 :이 링크와 같은 "계정"DIV 안에있는 "정보"DIV 표시됩니다

$("div.account a.more").click(function() { 
    $(this).parent().parent().parent().children("div.info").show(); 
    return false; 
}); 

. http://jsfiddle.net/Ma28E/

0

를 어느 각각 고유 한 ID를 div에 제공하거나 그들에게 모든 개 이상을 제공 :

$("div.account a.more").click(function() { 
    $(this).parents("div.account").first().children("div.info").show(); 
    return false; 
}); 

JSFiddle 데모 :

보다 유연하지만 덜 효율적인 접근 방식에 대한

, 당신은 또한이 작업을 수행 할 수 하나의 div에있는 클래스 세트는 고유합니다. 당신이 당신의 .click 레지스터는 내가하는 경향이있어 당신의 .info 요소 상대에 $(this)

$(".more").click(function(){ 
    $(this).parents(".account:first").find(".info").toggle(); 
}); 

Code example on jsfiddle

0

다음 코드

$('div.actions').find('a').click(function(e) 
{ 
    $(this).parents('div.actions').next('.info').show(); 
} 
0

저장이 새 파일에 : 당신이에 의해 반환 된 컬렉션의 모든 사업부를 찾을 수 있도록이 코드의 핵심은 JQuery와에 DOM 개체에 대한 JQuery와 객체의 변화가, 다시입니다

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 

     <script> 
      $(document).ready(function() { 
       $("#bt_action1").bind("click", function() { 
        $($(".account")[0]).toggle(); 
       }) 
       $("#bt_action2").bind("click", function() { 
        $($(".account")[1]).toggle(); 
       }) 
      }) 
     </script> 
    </head> 
    <body> 

     <div class="account"> 
      <div class="actions"> 
       <div><a href="" class="more">More Info 1</a></div> 
      </div><!-- /actions --> 
      <div class="info">This info would be show for more info</div> 
     </div><!-- /account --> 

     <div class="account"> 
      <div class="actions"> 
       <div><a href="" class="more">More Info 2</a></div> 
      </div><!-- /actions --> 
      <div class="info">This info would be show for more info</div> 
     </div><!-- /account --> 

     <form> 
      <input type="button" id="bt_action1" value="Show/Hide 1" /> 
      <input type="button" id="bt_action2" value="Show/Hide 2" /> 
     </form> 
    </body> 
</html> 

클래스 선택 :

$($(".account")[0]).toggle(); 

(. 두 번째 항목이 너무 인덱스 1하고있다, 그래서 컬렉션, 인덱스 0로 시작하는 것이 생각 나게 toggle() 표시하거나 교대 사업부를 숨길).