lấy số thứ n của một phần tử trong jquery

Question

Tôi có một lớp gồm nhiều phần tử 'DIV' và bên trong nó là danh sách các phần tử 'p'. Xem dưới đây:

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

Đây là mã jquery của tôi trên gọi nguyên tố các 'p' qua di chuột:

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

Làm thế nào tôi có thể nhận được số con thứ n của phần tử 'p' từ lớp container mẹ 'thùng đựng hàng'?

Giống như nếu bạn di

Đây là nội dung 1

cần kích hoạt đầu ra như 1;

Cảm ơn!

Answer 1

Bạn có thể sử dụng jQuery index function cho điều đó. Nó cho bạn biết phần tử đã cho liên quan đến anh chị em của nó ở đâu:

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

Live example | source

Các chỉ số được 0-based, vì vậy nếu bạn đang tìm kiếm một chỉ số 1 dựa trên (ví dụ, nơi đầu tiên là 1 hơn 0), chỉ cần thêm một với nó:

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

---

Nếu bạn không sử dụng jQuery và đi qua câu hỏi và câu trả lời này (OP đã sử dụng jQuery), điều này cũng khá đơn giản để làm mà không có nó. nth-child chỉ xem xét yếu tố, vì vậy:

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

Sử dụng phiên bản số ít trong những phương pháp .index() để tìm vị trí của các yếu tố liên quan đến anh chị em của nó:

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

Lưu ý rằng kết quả của .index() sẽ là số không dựa trên, không phải dựa trên một, do đó, + 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+")"); 
}); 

Nên hoạt động!

Hoặc nếu bạn muốn biết chỉ số của phần tử dao động:

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

Xem http://api.jquery.com/each/