[javascript] 부모를 기준으로 자식 요소의 색인을 가져옵니다.

Program / 글쓴이

이 마크 업이 있다고 가정 해 봅시다.

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

그러나 각 목록 항목에 하나의 클릭 핸들러를 연결하는 대신 delegate다음과 같은 성능을 사용 하는 것이 좋습니다 (성능 현명) .

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

jQuery 1.7 이상에서는을 사용해야합니다 on. 아래 예제 #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)
});

답변

이 예제를 살펴보십시오 .

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

답변

원하지 않으면 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미리 클릭하지 않고 클릭 할 때마다 의 배열을 구성해야 합니다.

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>

스 니펫 확장

답변

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/

답변