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

请参阅： 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 2

在jsfiddle上查看。这会将每个td的文本与titel类title放在同一行的a属性中。

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

解释这是做什么的：

对于每个选定的td.titel元素
- 将树向上走到父级（在这种情况下是tr），然后向下走到a
- 将td.titel元素的文字放在title

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答案。我发帖的时候正在写这篇文章。

从中获取HTML并将其附加到img

4 个答案: