요소 인덱스를 상위 요소에 대한 하위 요소로 가져옵니다.

요소 인덱스를 상위 요소에 대한 하위 요소로 가져옵니다.

다음과 같은 마크업이 있다고 가정해 보겠습니다.

<ul id="wizard">
    <li>Step 1</li>
    <li>Step 2</li>
</ul>

그리고 저는 다음과 같은 jQuery를 가지고 있습니다.

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

하위 항목의 색인을 가져오려면 어떻게 해야 합니까?li부모에 비해 상대적으로, 클릭할 때li?

예를 들어 "1단계"를 클릭하면alert"0"으로 표시됩니다.

$("#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() );
});

다음과 같은 것:

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

이 작업을 수행하기 위해 jQuery와 같은 대형 라이브러리가 필요하지 않습니다.내장된 DOM 조작으로 이를 달성하려면 다음과 같은 정보를 수집합니다.li배열에 있는 형제자매, 그리고 클릭하면,indexOf해당 배열에서 클릭한 요소.

const lis = [...document.querySelectorAll('#wizard > li')];
lis.forEach((li) => {
  li.addEventListener('click', () => {
    const index = lis.indexOf(li);
    console.log(index);
  });
});

<ul id="wizard">
    <li>Step 1</li>
    <li>Step 2</li>
</ul>

또는 이벤트 위임 사용:

const lis = [...document.querySelectorAll('#wizard li')];
document.querySelector('#wizard').addEventListener('click', ({ target }) => {
  // Make sure the clicked element is a <li> which is a child of wizard:
  if (!target.matches('#wizard > li')) return;
  
  const index = lis.indexOf(target);
  console.log(index);
});

<ul id="wizard">
    <li>Step 1</li>
    <li>Step 2</li>
</ul>

또는 하위 요소가 동적으로 변경될 수 있는 경우(작업관리 목록과 같이), 다음의 배열을 구성해야 합니다.li사전이 아닌 클릭할 때마다 s:

const wizard = document.querySelector('#wizard');
wizard.addEventListener('click', ({ target }) => {
  // Make sure the clicked element is a <li>
  if (!target.matches('li')) return;
  
  const lis = [...wizard.children];
  const index = lis.indexOf(target);
  console.log(index);
});

<ul id="wizard">
    <li>Step 1</li>
    <li>Step 2</li>
</ul>

이 예를 한 번 살펴 보십시오.

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

Delegate 및 Live는 사용하기 쉽지만 더 이상 동적으로 li: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/ 에서 테스트할 수 있습니다.

그러나 또 다른 방법

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

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

언급URL : https://stackoverflow.com/questions/4996002/get-index-of-element-as-child-relative-to-parent