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 thea
inside thattr
- Put the text of the
td.titel
element in thetitle
attribute of thea
- Walk up the tree to the parent (in this case it's the
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.
精彩评论