2009-06-08 2 views
11

jQuery를 사용하여 포함 된 앵커 태그의 HREF가 "#All"인 li의 색인을 가져올 수 있기를 바랍니다. 내가 시도요소 색인을 UL 내에서 가져 오기

<div id="tabs"> 
    <ul> 
     <li><a href="#CPU"><span>CPU</span></a></li> 
     <li><a href="#Pickup"><span>Pickup</span></a></li> 
     <li><a href="#Breakfix"><span>Breakfix</span></a></li> 
     <li><a href="#All"><span>All</span></a></li> 
    </ul> 
</div> 

(이 경우 올바른 결과는 3 것) :

$("#tabs ul").index($("li a[href='#All']")) 

를 ... 행운과 함께. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

답변

27

이 그것을 수행해야합니다 당신은 당신이 밖으로 인덱스를 얻고 싶었다 모든 <li>의 대신 모든 <ul>을 선택했다

var index = $("#tabs ul li").index($("li:has(a[href='#All'])")); 
  • . 그렇지 않으면 일치하는 요소가 <a> 자체 대신 <li> 될 것 당신이 :has 선택기를 사용하여 원하는과 링크가 :
  • 당신은 <li> 요소 가 있는지 확인해야합니다.

Tested the above 그리고 정답은 3입니다. 인덱스는 0부터 시작합니다.

+0

나 한테 이길 지마. +1 –

+0

지정한 텍스트가있는 엘레멘트의 색인을 찾고 싶다면? –

1

모든 LI 요소와 일치 시키려면 첫 번째 규칙이 모든 UL 요소와 일치하기 때문입니다. 시도 :

$("#tabs ul li").index($("li a[href='#All']")) 
+0

이것은 작동하지 않습니다. "-1"을 반환합니다. –

+0

그래, 깨닫지 못 했어. 파올로가 지적한 바있다. – robertc

1

요소 집합의 일부로 다른 컨텍스트 내부에서 요소의 인덱스를 가져 오려고합니다. 자세한 내용은 API 설명서의 index()을 참조하십시오. 특히 예제입니다.

<script type="text/javascript"> 
$(document).ready(function(){ 

    var which_index = $("#tabs ul li a").index($("a[href='#All']")); 
    alert(which_index); 
}); 
</script> 

<body> 
<div id="tabs"> 
    <ul> 
     <li><a href="#CPU"><span>CPU</span></a></li> 
     <li><a href="#Pickup"><span>Pickup</span></a></li> 
     <li><a href="#Breakfix"><span>Breakfix</span></a></li> 
     <li><a href="#All"><span>All</span></a></li> 
    </ul> 
</div> 
</body>