得到jquery中元素的第n個子元素號

Question

我有一個多元'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> 

這裏是通過懸停調用「P」元素，我的jQuery代碼：

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

我怎樣才能獲得元素「P」的第n個孩子數從父容器類'容器'？

一樣，如果你懸停

這是內容1

它應該觸發輸出爲1;

謝謝！

Answer 1

你可以使用jQuery的index function。它告訴你在給定的元素相對於它的兄弟姐妹：

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

Live example | source

的索引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; 
} 

Answer 2

使用.index()方法的無參數的版本找到元素相對於其同級的位置：

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

注意的結果.index()將基於零，而不是一個，因此+ 1

Answer 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/