Jquery : Get Index Of Element As Child Relative To Parent, Jquery Get Index Of Parent Element Code Example

$("#wizard li").click(function () // alert index of li relative khổng lồ ul parent);How can I get the index of the child li relative to lớn it"s parent, when clicking that li?

For example, when you click "Step 1", an alert with "0" should pop up.

Bạn đang xem: Jquery : get index of element as child relative to parent

$("#wizard li").click(function () console.log( $(this).index() ););However rather than attaching one click handler for each menu item it is better (performance wise) to use delegate which would look like this:

$("#wizard").delegate("li", "click", function () console.log( $(this).index() ););In jQuery 1.7+, you should use on. The below example binds the event to the #wizard element, working lượt thích a delegate event:

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

something like:

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

Take a look at this example.

$("#wizard li").click(function () alert($(this).index()); // alert index of li relative lớn ul parent);
There"s no need lớn require a big library lượt thích jQuery lớn accomplish this, if you don"t want to. Khổng lồ achieve this with built-in DOM manipulation, get a collection of the li siblings in an array, and on click, kiểm tra the indexOf the clicked element in that array.

Xem thêm: Phần Mềm Hệ Thống Là Gì Phần Mềm, Phần Mềm Hệ Thống

const lis = <...document.querySelectorAll("#wizard > li")>;lis.forEach((li) => li.addEventListener("click", () => const index = lis.indexOf(li); console.log(index); );); Step 1 Step 2
const lis = <...document.querySelectorAll("#wizard li")>;document.querySelector("#wizard").addEventListener("click", ( target ) => // Make sure the clicked element is a which is a child of wizard: if (!target.matches("#wizard > li")) return; const index = lis.indexOf(target); console.log(index);); Step 1 Step 2

Or, if the child elements may change dynamically (like with a todo list), then you"ll have to construct the array of lis on every click, rather than beforehand:

const wizard = document.querySelector("#wizard");wizard.addEventListener("click", ( target ) => // Make sure the clicked element is a if (!target.matches("li")) return; const lis = <...wizard.children>; const index = lis.indexOf(target); console.log(index);); Step 1 Step 2
Delegate & Live are easy to lớn use but if you won"t have any more li:s added dynamically you could use event delagation with normal bind/click as well. There should be some performance gain using this method since the DOM won"t have khổng lồ be monitored for new matching elements. Haven"t got any actual numbers but it makes sense :)

$("#wizard").click(function (e) var source = $(e.target); if(source.is("li")) // alert index of li relative to ul parent alert(source.index()); );You could test it at jsFiddle: http://jsfiddle.net/jimmysv/4Sfdh/1/

Yet another way

$("#wizard li").click(function () $($(this),"#wizard"").index(););Demohttps://jsfiddle.net/m9xge3f5/

Thanks for contributing an answer to Stack Overflow!

Please be sure lớn answer the question. Provide details và share your research!

But avoid …

Asking for help, clarification, or responding to lớn other answers.Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Post Your Answer Discard

By clicking “Post Your Answer”, you agree lớn our terms of service, privacy policy & cookie policy

Not the answer you're looking for? Browse other questions tagged javascript jquery or ask your own question.

Your privacy

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device và disclose information in accordance with our Cookie Policy.