JQuery show img title in span

Question

Я хочу показать название изображения в теге span. Я использую этот код, но в теге span ничего не отображается.

<script type="text/javascript" src="jquery-1.4.2.min.js" ></script> 
<script type="text/javascript"> 
jQuery(document).ready(function({ 
$('#thumb ul li a img').fadeIn(function() { 
     var $this = $(this); 
     $this.next('.showtitle').append($this.attr('title')); 
    }); 
}); 
</script> 
... 
<div class="thumb" id="thumb"> 
<ul class="ul"> 
<?php 
$result = mysql_query("SELECT * FROM ..."); 
$strstr=1; 
while ($row = mysql_fetch_array($result)) 
{ 
echo '<li class="li"><a href="' . $row['link']. '"><img src="'.$row['image'].'" title="'.$row['title'].'" class="img'.$strstr.'" /></a><span class="showtitle" /></li>'; 
$strstr++; 
} 
?> 
</ul> 
</div> 

Я проверил, название не пусто в базе данных. Как это исправить?

Answer 1

Попробуйте это изменение:

$('#thumb ul li a img').fadeIn(function() { 
     var $this = $(this); 
     $this.parent().next('.showtitle').append($this.attr('title')); 
    }); 
}); 

Я добавил в .parent(). Ваш захват «следующий» после изображения, но изображение вложено внутри ссылки, а заголовок следует за этой ссылкой, а не с изображением.

Answer 2

Проблема заключается в том, что .next() от вашего <img> элемента будет пустым - это последняя (единственная) вещь в ее окружении <a> тег. Попробуйте

$this.closest('a').next('span.showtitle').text($this.attr('title'));