开发者

Get html from <td class"title"> and attach it to img

I have 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-boomga开发者_开发技巧ard4.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>

What I am trying to create is that jQuery gets the title from the: td class="titel" and create at the a href="......" a title tag like this:

<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>

I have tried the following :

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

And:

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

And:

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

All of them are working, but collecting all the titles from the table and attach them to all the images.

What I need is that jQuery collects the title and attach it to the image above the td where it gets the title. What am I doing wrong?


See it on jsfiddle. This will put the text from each td with class titel on the title attribute of the a on the same row.

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

Explanation of what this does:

  • For each of the selected td.titel elements
    • Walk up the tree to the parent (in this case it's the tr), then down to the a inside that tr
    • Put the text of the td.titel element in the title attribute of the a


See: 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);
    });
});

The "Ellisons Orange" image doesn't work because the corresponding a element does not have class="img":

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

You can either add the class, or change .find('a.img img') to .find('a img').


This should work. You want to make sure you stay within context of "each" index:

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


Is this what you are looking for?

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

This gets each td with the class titel and wraps a link around it with the title attribute being the text within the td.

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

EDIT: haha, give the answer to the druttka. I was writing this when he posted.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜