jquery follow tag selector

Question

У меня проблема с jQuery. HTML:

<ul> 
    <li> 
    <a class="pfImg"></a> 
    <div><a>Text1</a></div> 
    </li> 
    <li> 
    <a class="pfImg"></a> 
    <div><a>Text2</a></div> 
    </li> 
</ul> 

В этой структуре, в каждом <li> есть изображение веб-сайта, и когда я парить, что картину, DIV будет отображаться с текстом, специально написанной для этого веб-сайта. <li> имеет указанную ширину и установленную на нем display: block; overflow: hidden;. Когда расширение <li> расширяется, div должен автоматически отображаться. Я пробовал его с помощью jQuery, но не нашел правильный код.

var $this = $(this); // EDIT: forgot I had created this variable. 
$('.pfImg').hover(
    function() { 
    $this.parent().animate({width: '300px'}, 'slow', 'swing'); 
    }, 
    function() { 
    $this.parent().animate({width: '100px'}, 'slow', 'swing'); 
}); // end hover 

Заранее спасибо

- Сехт

Answer 1

Использование $(this) вместо $this, Вы пропустили () и вы должны использовать next("div")

$('.pfImg').hover(function() { 
    $(this).next("div").animate({ 
     width: '300px' 
    }, 'slow', 'swing'); 
}, function() { 
    $(this).next("div").animate({ 
     width: '100px' 
    }, 'slow', 'swing'); 
}); // end hover 

Answer 2

Если я правильно понял, что ты необходимо, вы можете использовать next() следующим образом:

FIDDLEhttp://jsfiddle.net/5gVRS/

Jquery

$('.pfImg').hover(
    function() { 
     $(this).next("div").animate({width: '300px'}, 'slow', 'swing'); 
    }, 
    function() { 
     $(this).next("div").animate({width: '100px'}, 'slow', 'swing'); 
}); // end hover 

имеют вид here, чтобы лучше понять, как работает next()

Answer 3

Вам нужно поставить "это" в кронштейне.

E.g $(this).

Или $(this).next(div)

Вы можете дать ему попробовать. Не уверен, какой способ работает лучше всего.