JQuery - 선택자 문제 (형제, 부모 ...)

결과가 국가 이름별로 그룹화 된 coldfusion 쿼리가 있습니다. 이 버튼을 클릭하면 해당 국가의 목록을 열거 나 닫습니다. 하지만 나는이 형제와이 부모들과 올바르게 일할 수 없다. 결과는 나라 이름을 클릭하면 네 번째 예를 들어, 모든 어린이를 닫고 세 국가 이름도 이전과 같습니다. 누군가 내가 올바른 선택자를 선택할 수 있도록 도와 줄 수 있습니까? 가 사전에 감사합니다, 미셸JQuery - 선택자 문제 (형제, 부모 ...)

코드 :

<script type="text/javascript" language="javascript"> 
    $(document).ready(function(){ 
     var toggleMinus = '<cfoutput>#variables.strWebAddress#</cfoutput>/images/bullet_toggle_minus.png'; 
     var togglePlus = '<cfoutput>#variables.strWebAddress#</cfoutput>/images/bullet_toggle_plus.png'; 
     var $subHead = $('table#categorylist tbody th:first-child'); 
     $subHead.prepend('<img src="' +toggleMinus+ '" alt="collapse this section" />&nbsp;'); 
     $('img', $subHead).addClass('clickable').click(function(){ 
      var toggleSrc = $(this).attr('src'); 
      if(toggleSrc == toggleMinus){ 
       $(this).attr('src',togglePlus).parents('.country').siblings().fadeOut('fast'); 
      }else{ 
       $(this).attr('src',toggleMinus).parents('.country').siblings().fadeIn('fast'); 
      } 
     }); 
    }); 
</script> 

<table width="95%" border="0" cellspacing="2" cellpadding="2" align="center id="categorylist"> 
<thead> 
    <tr> 
     <th class="text3" width="15%"> 
      <cfmodule template="../custom_tags/get_message.cfm" keyName="L_ACTOR_CODENUMBER"> 
     </th> 
     <th class="text3" width="15%"> 
      <cfmodule template="../custom_tags/get_message.cfm" keyName="L_ACTOR_CODE"> 
     </th> 
     <th class="text3" width="55%"> 
      <cfmodule template="../custom_tags/get_message.cfm" keyName="L_ACTOR_NAME"> 
     </th> 
     <th class="text3" width="15%"> 
      <cfmodule template="../custom_tags/get_message.cfm" keyName="L_ACTIVE"> 
     </th> 
    </tr> 
</thead> 
<tbody id="content"> 
<cfoutput query="qryCategoryUrl" group="country_name" groupcasesensitive="false"> 
    <tr class="country"> 
     <th style="font-weight:bold; text-align:left;" colspan="4">#country_name#</th> 
    </tr> 
<cfoutput> 
    <tr> 
     <td valign="top" class="text3">#Replace(ACTOR_CODENUMBER, Chr(13) & Chr(10), "<br>", "ALL")#&nbsp;</td> 
     <td valign="top" class="text3">#Replace(ACTOR_CODE, Chr(13) & Chr(10), "<br>", "ALL")#&nbsp;</td> 
     <td valign="top" class="text3">#Replace(ACTOR_NAME, Chr(13) & Chr(10), "<br>", "ALL")#&nbsp;</td> 
     <td valign="top" class="text3"><cfmodule template="../custom_tags//get_message.cfm" keyName="#ACTIVE_display(qryCategoryUrl.ACTIVE)#"></td> 
    </tr> 
</cfoutput> 
</cfoutput> 
</tbody> 
</table>

출처

2011-01-24 Michel

통합 된 템플릿과 서버 측 코드를 사용하기 때문에 복제하기가 약간 어렵습니다. 생성 된 HTML 코드 샘플을 업데이트 할 수 있습니까? 이렇게하면 상황을 복제 할 수 있습니다. –

대신 :

.parents('.country').siblings().fadeOut('fast');

이 시도 :

.closest('.country').nextUntil('.country').fadeOut('fast');

그리고 물론

이 같은 변경 사항을 적용 .fadeIn(). .fadeToggle()^docs도 볼 수 있습니다.

다음은 (감소 된) 예입니다. http://jsfiddle.net/redler/5sqJz/입니다. 이 예제에는 영향을주지 않지만 아마도 해당 세부 행의 초기 상태를 숨김으로 설정하는 것입니다.

출처

2011-01-24 15:06:10

켄, 고맙습니다. 아직 하나의 작은 문제가 있습니다. 처음으로 두 번 클릭하여 전환합니다. 왜 그런지 알아? – Michel

나는 fadeToggle을 시도하고 '두 번 클릭'문제가 사라졌습니다. – Michel

도와 주셔서 대단히 감사 드리며 Brian에게도 행크를 잡으십시오. – Michel

모든 cfmodule 사용법에서 cfmodule은 메모리 돼지가 될 수 있습니다. 난 항상 추천 무엇 비록

사람들이 어떤 브라우저에서 자신의 페이지를 시도하고이 쉽게 테스트하고 앱의 요구에 대한 올바른 선택을 확인 할 수 있습니다 http://www.selectorgadget.com/

에서 SelectorGadget의 북마크를 사용한다는 것입니다.

출처

2011-01-25 14:58:01 crosenblum

JQuery - 선택자 문제 (형제, 부모 ...)

답변

관련 문제