2014-12-22 2 views
1

http://learn.jquery.com/using-jquery-core/understanding-index/의 jQuery있는 .index(), 인수

와 혼동 변화는 아마도 내가 위의 기사에서 뭔가를 놓친하지만 인덱스 번호는 인수가 때 수행하는 방식을 변경하는 이유는 을 이해하는 몇 가지 문제가 있어요 .index()와 함께 사용됩니다. 내가 "인덱스 : 1"얻을

console.log( 
    "Index: " + $("#foo2").index() 
); 

실행하면

<body> 
     <button id="console2">consoleSection2</button> 
     <ul> 
      <div class="test"></div> 
      <li id="foo2">foo</li> 
      <li id="bar2" class="test">bar</li> 
      <li id="baz2">baz</li> 
      <div class="test"></div> 
     </ul> 
     <div id="last"></div> 
</body> 

와 예를 들어

, 내가 실행하면 반면,

"인덱스 :"+ $ ("# foo2"). 색인 ("li")

색인 : 0 ".

왜 변경 되나요? 나에게도 "# foo2"는 이미 "li"요소에 있기 때문에 그대로 유지됩니다.

더하기, 왜 인덱스로 0이 될까요? 그것은 "# foo2"라는 ID를 가진 "li"의 첫 번째 인스턴스이기 때문입니까? 만약 .index()로 선택기 문자열을 전달할 때

http://jsfiddle.net/f88zxaxo/

+0

잘못된 html입니다. Divs는 UL의 형제가되어서는 안됩니다. http://www.w3.org/TR/html-markup/ul.html – epascarello

+0

최종 제품이 아니며/학습하면서 테스트하고있는 것입니다. 또한 http://learn.jquery.com/using-jquery-core/understanding-index/와 비슷합니다. 하지만 어쨌든 정보 주셔서 감사합니다. – Terf

답변

2

는, 반환 값은 jQuery 오브젝트를 포함하는 요소들의 목록 내에서 상기 제 매칭 소자 의 위치를 ​​나타낸다.

.index()은 형제 중 HTML 컨테이너 요소 내에 요소 의 위치를 ​​알려줍니다.

에서 "foo2"요소가 포함 된 하위 요소의 위치 1에 있기 때문에 $("#foo2").index()에서 1이 반환됩니다 (그런데 잘못된 마크 업 임). 그러나, $("#foo2").index("li")에서 0을 얻습니다. jQuery 객체에는 하나의 요소 만 있고 그 요소는 <li>입니다. $("#foo2").index("span")을 시도하면 -1이 다시 발생합니다.

+0

jQuery 객체에 둘 이상의 요소가 있다는 예를 들려 줄 수 있습니까? 나는 "test"의 클래스로 두 개의 "div"인스턴스를 가지고 있지만 "Index :"+ $ (". test")를 로깅한다 .index ("div")도 "Index : 0"이된다. – Terf

+1

@Terf는 문서에'$ ("li")'을 고려합니다. jQuery 객체에는 3 개의 요소가 있습니다. 따라서'$ ("li") .index ("# baz2")'는 2이고'$ ("# baz2") .index()는 3과'$ ("# baz2")가된다. ("li")'은 다시 0이 될 것입니다. – Pointy

+1

@Terf는 이렇게 생각합니다 : 인자없이 '.index()'는 DOM의 구조와 관련하여 첫 번째로 일치 된 요소의 위치를 ​​묻습니다. * 인수를 사용하면'.index()'는 jQuery 객체에서 선택된 요소의 컬렉션에 대해 물어볼 수 있으며 DOM과 아무런 관련이 없다. – Pointy

관련 문제