Вопрос по html, jquery – получить номер n-го элемента в jquery

28

У меня есть класс множественных «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"? из его родительского контейнера класса «контейнер»?

Как если бы вы парили

This is content 1

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

Связанный:stackoverflow.com/q/1442925/55209 Artem Koshelev
ой. это жаль тогда ..! Philemon philip Kunjumon
@ArtemKoshelev, что это неправильно - этот вопрос "задан элемент, скажите мне n", а не "дано n, скажите мне элемент". Alnitak
@Alnitak О, теперь я вижу, это указало мне на неправильный путь & # x201C; Как я могу получить n-ный дочерний номер элемента? P? Apos; из его родительского контейнера класса «контейнер»? & # x201D; Artem Koshelev

Ваш Ответ

3   ответа
-1
$('.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/

Да, это, вероятно, так. Я не знал о .index (). В действительности это также не влияет на производительность:jsperf.com/index-vs-each, Итак, я кое-что узнал сегодня :-)
это не просто производительность, это эффективность памяти. Ваша версия создает новое закрытие для каждого соответствующего элемента на странице.
Я знаю, но это может быть эффективно, если вы хотите где-то хранить индекс, а .index () не существует. Другой вариант - сохранить индекс для самого элемента. Но это не имеет значения: мой выбор, конечно, не оптимален :-)
вау, это слишком сложно ...
67

Вы можете использовать jQueryindex function для этого. Он говорит вам, где данный элемент относительно его братьев и сестер:

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

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

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

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

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

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;
}
@Alnitak: спасибо, я полагаю, ОПdid конкретно сказать, что они хотели1 во-первых, не так ли? Обновлено.
Не могли бы вы поделиться с нами недавним даунотером? Почему вы считаете, что этот ответ был "бесполезным"? использовать терминологию кнопки понижения? (Особенно, поскольку ОП явно чувствовал, что это было.)
Вы забыли добавить 1 в индекс ...
6

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

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

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

Похожие вопросы