получить номер n-го элемента в 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"? из его родительского контейнера класса «контейнер»?
Как если бы вы парили
This is content 1
это должно вызвать выход как 1;
Ответы на вопрос(3)
Вы можете использовать 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;
}
Используйте версию без параметров.index() Метод, чтобы найти положение элемента относительно его братьев и сестер:
$('.container').children('p').hover(function() {
var index = $(this).index() + 1;
});
Обратите внимание, что результат.index() будет на основе нуля, а не на основе одного, следовательно,+ 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/