bekomme die N-te-Kind-Nummer eines Elements in jquery

Question

Ich habe eine Klasse von mehreren "DIV" -Elementen und darin eine Liste von 'p' -Elementen. Siehe unten:

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

Hier ist meine jQuery-Code ist auf den Aufruf der ‚p‘ Elemente durch Hover:

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

Wie kann ich die n-te Kind Zahl des Elements ‚p‘ von der übergeordneten Container-Klasse erhalten 'Container'?

Wie, wenn Sie schweben

Dies ist Inhalt 1

es sollte eine Ausgabe als 1 auslösen;

Danke!

Answer 1

Sie können die index function von jQuery dafür verwenden. Es sagt Ihnen, wo das gegebene Element auf seine Geschwister ist relativ:

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

Live example | source

Die Indizes sind 0-basiert, so dass, wenn Sie sich für einen 1-basierten Index suchen (zB wo der erste ist 1 statt 0), fügen Sie einfach ein zu ihm:

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

---

Wenn Sie jQuery nicht verwenden und auf diese Frage und Antwort gestoßen sind (das OP verwendete jQuery), ist dies auch ganz einfach ohne es möglich. nth-child betrachtet nur Elemente, so:

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

die parameterlose Version des .index() Methode Verwenden Sie die Position des Elements relativ zu seiner Geschwister zu finden:

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

Beachten Sie, dass das Ergebnis der .index() Null-basiert sein, nicht ein Basis, daher der + 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+")"); 
}); 

Sollte funktionieren!

Oder wenn Sie den Index des hovered Element wissen wollen:

$('.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/