[JQUERY] 부모 자식 상대적으로 요소의 인덱스를 가져옵니다

부모 자식 상대적으로 요소의 인덱스를 가져옵니다

해결법

1. ---

   1.

   $("#wizard li").click(function () {
       console.log( $(this).index() );
   });
   

   그러나 오히려 각 목록 항목에 대해 하나의 클릭 핸들러를 부착하는 것보다이 같을 것이다 사용 위양 (현명한 성능) 더 :

   $("#wizard").delegate('li', 'click', function () {
       console.log( $(this).index() );
   });
   

   jQuery를 1.7+, 당신은에 사용해야합니다. 아래의 예는 대리인 사건처럼 작동은 #wizard 소자 이벤트 바인딩 :

   $("#wizard").on("click", "li", function() {
       console.log( $(this).index() );
   });
   

2. ---

   2.뭔가 같은 :

   뭔가 같은 :

   $("ul#wizard li").click(function () {
     var index = $("ul#wizard li").index(this);
     alert("index is: " + index)
   });
   

3. ---

   3.이 예를 살펴 보자.

   이 예를 살펴 보자.

   $("#wizard li").click(function () {
       alert($(this).index()); // alert index of li relative to ul parent
   });
   

4. ---

   4.당신이 원하지 않는 경우, 이러한 목표를 달성하기 위해 jQuery를 같은 큰 라이브러리를 필요로 할 필요가 없습니다. 이것을 달성하기 위해 내장 된 DOM 조작, 배열에 리 형제의 컬렉션을 얻고, 클릭에 해당 배열에 같이 IndexOf를 클릭 된 요소를 확인합니다.

   당신이 원하지 않는 경우, 이러한 목표를 달성하기 위해 jQuery를 같은 큰 라이브러리를 필요로 할 필요가 없습니다. 이것을 달성하기 위해 내장 된 DOM 조작, 배열에 리 형제의 컬렉션을 얻고, 클릭에 해당 배열에 같이 IndexOf를 클릭 된 요소를 확인합니다.

   CONST LIS = ... document.querySelectorAll ( '# 마법사> 리')]; lis.forEach ((리튬) => { li.addEventListener는 () ( '클릭'=> { CONST 인덱스 = lis.indexOf (리튬); CONSOLE.LOG (인덱스); }); });

   • 단계 1
   • 2 단계

     또는, 이벤트 대표단 :

     CONST LIS = ... document.querySelectorAll ( '# 마법사 리')]; document.querySelector ( '# 마법사 ").이 또는 addEventListener ('클릭 '(타겟 {}) => { // 확인 클릭 된 요소 마법사의 자식 인 <리>는 : 만약 수익률 (target.matches ( '# 마법사> 리')!); CONST 인덱스 = lis.indexOf (표적); CONSOLE.LOG (인덱스); });

     • 단계 1
     • 2 단계

       자식 요소의 (a 할 일 목록 등) 동적으로 변경 될 경우 또는, 당신은 사전이 아니라, 모든 클릭에 문양의 배열을 구성해야합니다 :

       CONST 마법사 document.querySelector = ( '# 마법사'); wizard.addEventListener는 ( '클릭'(타겟 {}) => { // 확인 클릭 된 요소는

     • 입니다 (!의 target.matches ( '리')) 반환하는 경우; CONST LIS = ... wizard.children]; CONST 인덱스 = lis.indexOf (표적); CONSOLE.LOG (인덱스); });
       • 단계 1
       • 2 단계

       • ---

         5.위임 및 라이브는 사용이 간편하지만 당신은 더 이상 리튬을하지 않을 경우 : 동적으로뿐만 아니라 클릭 / 일반 바인드 이벤트 delagation를 사용할 수있는 추가 s의. 새 일치하는 요소를 모니터링 할 필요가 없습니다 DOM을하기 때문에이 방법을 사용하여 약간의 성능 향상이 있어야합니다. 실제 번호를 가지고 있지만 의미가하지 않은 :)

         위임 및 라이브는 사용이 간편하지만 당신은 더 이상 리튬을하지 않을 경우 : 동적으로뿐만 아니라 클릭 / 일반 바인드 이벤트 delagation를 사용할 수있는 추가 s의. 새 일치하는 요소를 모니터링 할 필요가 없습니다 DOM을하기 때문에이 방법을 사용하여 약간의 성능 향상이 있어야합니다. 실제 번호를 가지고 있지만 의미가하지 않은 :)

         $("#wizard").click(function (e) {
             var source = $(e.target);
             if(source.is("li")){
                 // alert index of li relative to ul parent
                 alert(source.index());
             }
         });
         

         당신은 jsFiddle에서 테스트 할 수 : http://jsfiddle.net/jimmysv/4Sfdh/1/

       • ---

         6.또 다른 방법

         또 다른 방법

         $("#wizard li").click(function () 
         {
             $($(this),'#wizard"').index();
         });
         

         데모 https://jsfiddle.net/m9xge3f5/

       from https://stackoverflow.com/questions/4996002/get-index-of-element-as-child-relative-to-parent by cc-by-sa and MIT license