Get Index of Element as Child Relative to Parent

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 list 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 like a delegate event:

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

How to get index of div in parent div?

Use Array.prototype.indexOf() to find the child inside it's parent.children

var child = document.getElementById('findme');
var parent = child.parentNode;

var index = Array.prototype.indexOf.call(parent.children, child);
console.log(index);

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child" id="findme"></div>
    <div class="child"></div>
</div>

How to get index of child in a div?

You can use indexOf() like the following way:

var images = Array.prototype.slice.call(document.getElementById('container').children);images.forEach(function(el){  el.addEventListener('mouseover', getIndex);});function getIndex(){  //console.clear(); // clear the console  var index = images.indexOf(this);  document.getElementById('index').textContent = 'The index of the image is: ' + index;}

<div id="container">  <img src="img_1.jpg" alt="Image 1">  <img src="img_2.jpg" alt="Image 2">  <img src="img_3.jpg" alt="Image 3"></div><div id="index"></div>

Get index of list child relative to parent

I modified your codepen javascript into this:

$(function() {
    $("#selectable" ).selectable({
        selecting: function(event, ui) {
            console.log($(ui.selecting).index())
        }
    });
})

Your click event won't work if you already bind selectable to the wrapper. You have a method inside it called: selecting and it should do the trick.

Hope it helps!

Determining child index in it's parent

To get an index in of an elements in its parent (amongst siblings really) use .index() without any parameters, for example:

$(".child").click(function() {
  alert("Index: " + $(this).index());
});

You can test it out here.

Element's coordinates relative to its parent

You can use getBoundingClientRect(), simply subtracting the coordinates of the parent:

var parentPos = document.getElementById('parent-id').getBoundingClientRect(),
    childPos = document.getElementById('child-id').getBoundingClientRect(),
    relativePos = {};

relativePos.top = childPos.top - parentPos.top,
relativePos.right = childPos.right - parentPos.right,
relativePos.bottom = childPos.bottom - parentPos.bottom,
relativePos.left = childPos.left - parentPos.left;

console.log(relativePos);
// something like: {top: 50, right: -100, bottom: -50, left: 100}

Now you have the coordinates of the child relative to its parent.

Note that if the top or left coordinates are negative, it means that the child escapes its parent in that direction. Same if the bottom or right coordinates are positive.

Working example

var parentPos = document.getElementById('parent-id').getBoundingClientRect(),    childPos = document.getElementById('child-id').getBoundingClientRect(),    relativePos = {};
relativePos.top = childPos.top - parentPos.top,relativePos.right = childPos.right - parentPos.right,relativePos.bottom = childPos.bottom - parentPos.bottom,relativePos.left = childPos.left - parentPos.left;
console.log(relativePos);

#parent-id {    width: 300px;    height: 300px;    background: grey;}
#child-id {    position: relative;    width: 100px;    height: 200px;    background: black;    top: 50px;    left: 100px;}

<div id="parent-id">    <div id="child-id"></div></div>

How can i find the index of parent clicking child

$('.opSection').on('click', 'li', function () {
    alert($(this).parent().index();
});

Note I've used event delegation to improve performance when handling events for multiple elements.

The important parts here is parent() to select the ul, and then index(), which, when passed with no parameters, returns it's position relative to its sibling elements.

EDIT As you've said in your comment that your markup isn't the same as what you posted in the question, try the following instead:

$('.opSection').on('click', 'li', function (e) {
    $(e.delegateTarget).find('.selectGroup').index(this.parentNode);
});

$(e.delegateTarget) is the same (but faster) than $('.opSection'). We then search all descendants (find()) for all the <ul />'s, and use the same index() method to find the position of the one we clicked.

---

Related Topics