jQuery 선택기가 형제에게 적합하지 않습니까?

나는 앵커 태그가있는 다중 레벨 메뉴가 있습니다. 제 문제는 jQuery 선택기가 제대로 작동하도록하는 것입니다.jQuery 선택기가 형제에게 적합하지 않습니까?

근무 코드 :

$(this) 
    .closest('li') 
    .siblings('li.open') 
    .children('a') 
    .children('i') 
    .toggleClass('class1') 
    .toggleClass('class2');

그것이 있어야 무엇 :

$(this) 
    .closest('li') 
    .siblings('li.open > a > i') 
    .toggleClass('class1') 
    .toggleClass('class2');

그러나 심지어이 작품 :

$(this) 
    .closest('li') 
    .siblings('li.open a i') 
    .toggleClass('class1') 
    .toggleClass('class2');

내가 텍스트 형태로 수행 할 작업 : onClick 이벤트는 앵커 태그를 대상으로합니다. 저는 부모님의 형제 자매 앵커에 i-Tags를 사용하여 두 가지 수업을 번갈아하고자합니다.

HTML

<ul> 
    <li> 
     <a><i class="class1"></i>Label</a> 
     <ul> 
      <li> 
       <a><i class="class1"></i>Label</a> 
      </li> 
      <li> 
       <a><i class="class1"></i>Label</a> 
      </li> 
      <li> 
       <a><i class="class1"></i>Label</a> 
      </li> 
      <li> 
       <a><i class="class1"></i>Label</a> 
      </li> 
      <li> 
       <a><i class="class1"></i>Label</a> 
      </li> 
      <li> 
       <a><i class="class1"></i>Label</a> 
      </li> 
      <li> 
       <a><i class="class1"></i>Label</a> 
      </li> 
     </ul> 
    </li> 
    <li class="open"> 
     <a><i class="class1"></i>Label</a> 
     <ul> 
      <li> 
       <a><i class="class1"></i>Label</a> 
      </li> 
      <li> 
       <a><i class="class1"></i>Label</a> 
      </li> 
      <li> 
       <a><i class="class1"></i>Label</a> 
      </li> 
      <li> 
       <a><i class="class1"></i>Label</a> 
      </li> 
      <li> 
       <a><i class="class1"></i>Label</a> 
      </li> 
      <li> 
       <a><i class="class1"></i>Label</a> 
      </li> 
      <li> 
       <a><i class="class1"></i>Label</a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a><i class="class1"></i>Label</a> 
    </li> 
    <li> 
     <a><i class="class1"></i>Label</a> 
    </li> 
    <li> 
     <a><i class="class1"></i>Label</a> 
    </li> 
    <li> 
     <a><i class="class1"></i>Label</a> 
    </li> 
    <li> 
     <a><i class="class1"></i>Label</a> 
    </li> 
</ul>

출처

2012-09-11 ProblemsOfSumit

이 질문은 귀하의 HTML을 볼 수 있었는지 조금 더 이해할 수 있습니다. –

나는 그것을 더했다. 그것은 간단한 목록입니다. 그 안에 중첩 된 목록이 더 있습니다. 보시다시피 두 번째 최상위 LI에는 클래스가 열려 있습니다. 첫 번째 최상위 LI의 앵커를 클릭하면 li.open의 앵커 태그 i 태그 (해당 구문에 대해 유감스럽게 생각합니다)를 사용하여 클래스를 전환 할 수 있습니다. – ProblemsOfSumit

나는

('li.open > a > i')

이

$(this).closest('li')

리튬의 형제의 형제가 아니기 때문에 작동하지 않습니다 이유는 다른 리튬이 생각 .

당신은 당신이 게시

$(this).closest('li').sibling('li.open').find('a > i').toggleClass('blah');

은 왜 코드의 첫 번째 조각을 사용할 수 없습니다 시도 할 수 있을까?

출처

2012-09-11 06:56:38 Brentoe

사용할 수 있습니다. 그냥 보이지 않는데 왜 작동하지 않는지 알고 싶었습니다. 설명해 주셔서 감사합니다. – ProblemsOfSumit

하지만 LI는 앵커 태그보다 더 많은 자식을 가지고 있기 때문에 find()를 사용할 수 없습니다. 예를 들어 더 많은 앵커 태그를 포함한 다른 목록. 다중 레벨 메뉴입니다. – ProblemsOfSumit

아, 예를 들어 처음 게시 한 코드가 아마도 최선의 방법 일 것입니다. – Brentoe

jQuery 선택기가 형제에게 적합하지 않습니까?

답변

관련 문제