JQuery показывает неправильный р индексировать

Question

Так что я сделал небольшой пример здесь:

http://jsfiddle.net/u4yz7b7L/

, который показывает, что р элемент имеет 2 индекса, вместо 0 (то зависания на первый р элемент). Почему это так ?

$('body').on('hover', '.trn p', function() { 
var ind = $(this).index(); 
var ps = $('.trn:visible p:eq(' + ind + ')').html(); 
console.log(ps); 
console.log(ind); 
}); 

Answer 1

Ваша структура выглядит следующим образом:

<div class="trn"> 
    <img /> 
    <h1></h1> 
    <p></p> 
    <p></p> 
</div> 

Так первый <p> третий элемент внутри родителя. Индексы начинаются с 0, поэтому третий элемент имеет индекс 2.

Вместо того чтобы использовать индекс, почему бы не использовать $(this)?

$('body').on('hover', '.trn p', function() { 
    var ind = $(this).index(); 
    var ps = $(this).html(); 
    console.log(ps); 
    console.log(ind); 
}); 

Answer 2

вы можете использовать $(this) или $(event.target) что то же самое, в конце концов:

$('body').on('hover', '.trn p', function(event) { 
    var ps1 = $(this).html(), 
     ps2 = $(event.target).html(); 
    console.log(ps1); 
    console.log(ps2); 
});