从中获取HTML and attach it to img

Question

我有HTML：

<table id='ansichttable' class='table appels'>
    <thead>
        <tr>
            <th class='bold'>Afbeelding</th>
            <th class="bold">Locatie</th>
            <th class='bold'>Groep</th>
            <th class='bold'>Soort</th>
            <th class='bold'>Bijzonderheden</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a class="img" href="images/imagesfruit/boomgaard4.jpg"><img src="images/imagesfruit/thumbs/t-boomgaard4.jpg"/></a></td>
            <td valign="top">Tuin</td>
            <td valign="top">Appels</td>
            <td valign="top" class="titel">Dubbele Bellefleur</td>
            <td valign="top">Zoete stevige appel</td>
        </tr>
        <tr>
            <td><a class="img" href="images/imagesfruit/boomgaard4.jpg"><img src="images/imagesfruit/thumbs/t-boomgaard4.jpg"/></a></td>
            <td valign="top">Tuin</td>
            <td valign="top">Appels</td>
            <td valign="top" class="titel">Dubbele Zoete Aagt</td>
            <td valign="top">Zoete stevige appel</td>
        </tr>
        <tr>
            <td><a href="images/imagesfruit/boomgaard4.jpg"><img src="images/imagesfruit/thumbs/t-boomgaard4.jpg"/></a></td>
            <td valign="top">Tuin</td>
            <td valign="top">Appels</td>
            <td valign="top" class="titel">Ellisons Orange</td>
            <td valign="top">Zoete stevige appel</td>
        </tr>
    </tbody>
</table>

我想要创建的是jQuery从：td class="titel"获取标题并在href="......"创建一个标题标签，如下所示：

<td><a href="images/imagesfruit/boomgaard4.jpg" titel="Ellisons Orange"><img src="images/imagesfruit/thumbs/t-boomgaard4.jpg"/></a></td>
<td valign="top">Tuin</td>
<td valign="top">Appels</td>
<td valign="top" class="titel">Ellisons Orange</td>
<td valign="top">Zoete stevige appel</td>

我尝试过以下方法：

$(document).ready(function(){
 var gettitle = $("td:eq(3)").html();
                 $("td a").attr("title", $('td.titel').text()); 

和：

$("td a.img").attr("title", $('.titel').html());

和：

$('table').each(function() {
  var title = $(this).find('td.titel').text();
  $(this).find('td a').attr('title', title);
 });

所有这些都在工作，但从表中收集所有标题并将它们附加到所有图像。

我需要的是jQuery收集标题并将其附加到获取标题的td上方的图像中。我究竟做错了什么？

Answer 1

在jsfiddle上看到它。这将把td的每个titel的文本放在同一行的title的a属性上。

$('td.titel').each(function() {
    $(this).parent().find('a').attr('title', $(this).text()); 
});

解释这是做什么的：

• 对于每个选定的td.titel元素 走到树的父母（在这种情况下，它是tr），然后到a里面的tr 把td.titel元素的文本放在title的a属性中

Answer 2

见：http://jsfiddle.net/dP76b/

$(document).ready(function(){
    $('.table tr').each(function(){
        var titleText = $(this).find('.titel').text();
        $(this).find('a.img img').attr('title', titleText);
    });
});

“Ellisons Orange”图像不起作用，因为相应的a元素没有class="img"：

<a href="images/imagesfruit/boomgaard4.jpg"><img src="images/imagesfruit/thumbs/t-boomgaard4.jpg"/></a>

您可以添加class，或将.find('a.img img')更改为.find('a img')。

Answer 3

这应该工作。您希望确保保持在“每个”索引的上下文中：

$('table tr').each(function(i,obj){
    $('td{0} a',this).attr('title',$('td.titel',this).text());
}); 

Answer 4

这是你想要的？

$("td.titel").each(function(){
    $(this).html('<a href="" title="'+$(this).text()+'">'+$(this).text()+'</a>');
});

这将获得每个td类标题，并在其周围包含一个链接，title属性是td中的文本。

$("td.titel").each(function(){     
    $(this).parent().find('a.img').attr('title',$(this).text()); 
});

编辑：哈哈，给druttka答案。我发帖的时候正在写这篇文章。