Получить число nth-child элемента jquery

У меня есть класс из нескольких элементов "DIV", и внутри него есть список элементов "p". См. Ниже:

<div class="container">
    <p>This is content 1</p>
    <p>This is content 2</p>
    <p>This is content 3</p>
</div>
<div class="container">
    <p>This is content 1</p>
    <p>This is content 2</p>
    <p>This is content 3</p>
</div>

Здесь мой код jquery при вызове элементов 'p' через зависание:

$('.container').children('p').hover(function(){
    //get the nth child of p from parent class 'container'
});

Как я могу получить n-й дочерний номер элемента 'p' из своего контейнера-контейнера-контейнера?

Как если бы вы зависали

Это содержимое 1

он должен вызывать вывод как 1;

Спасибо!

Ответ 1

Для этого вы можете использовать функцию jQuery index. Он сообщает вам, где данный элемент относительно своих братьев и сестер:

var index = $(this).index();

Живой пример | источник

Индексы основаны на 0, поэтому, если вы ищете индекс на основе 1 (например, где первый - 1, а не 0), просто добавьте его к нему:

var index = $(this).index() + 1;

Если вы не используете jQuery и столкнулись с этим вопросом и ответом (OP использовал jQuery), это тоже довольно просто обойтись без него. nth-child рассматривает только элементы, поэтому:

function findChildIndex(node) {
    var index = 1;                         // nth-child starts with 1 = first child
    // (You could argue that you should throw an exception here if the
    // `node` passed in is not an element [e.g., is a text node etc.]
    // or null.)
    while (node.previousSibling) {
        node = node.previousSibling;
        if (node && node.nodeType === 1) { // 1 = element
            ++index;
        }
    }
    return index;
}

Ответ 2

Используйте параметр .index(), чтобы найти положение элемента относительно его братьев и сестер:

$('.container').children('p').hover(function() {
     var index = $(this).index() + 1;
});

Обратите внимание, что результат .index() будет основан на нулевом значении, а не на одном, поэтому + 1

Ответ 3

$('.container').children('p').hover(function(){
    //get the nth child of p from parent class 'container'
    var n = 1;
    var child = $(this).parent().find("p:eq("+n+")");
});

Должен работать!

Или, если вы хотите узнать индекс зависающего элемента:

$('.container').children('p').each(function(index,element) {
    // use closure to retain index
    $(element).hover(function(index){
        return function() { alert(index); }
    }(index);
}

См. http://api.jquery.com/each/