이 마크 업이 있다고 가정 해 봅시다.
<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();
});