如何在jquery中获取最接近的img标签？

Question

HTML

<tr class='test_file'>
    <td id=img_id><img src='"+ROOT_PATH+"/assets/arrow_black_right.png' /></td>
    <td colspan=2 id=fileName>"+fileName+"</td>
</tr><span>

I need to change the image when the td with id=fileName is clicked in jQuery.

How can I fetch the img tag and change its src attribute using jQuery?

I am trying to do something like this :

$($(this).closest("img")).attr("src")

Answer 1

Use a combination of .closest and .find()

closest finds its ancestors

you need to find its descendants and not the ancestors

So you need to first find the closest row, which contains the filename id element and then find the img which is a descendant of the corresponding row

$(this).closest('tr').find("img").attr("src"); // using find

or

var $tr = $(this).closest('tr'); // get the closest row
$("img", $tr).attr("src");  // use a context to get the image

Answer 2

You could use .siblings()

JavaScript/jQuery

$(this).siblings("#img_id").children('img').prop('src');

Edit

JSFiddle proof

Answer 3

"the td with id=fileName is clicked": You are going to have to go up to the tr element, and then use find to search through the descendants in order to find the image element. .parentNode will find the parent element of this (the <td> in this case). find("img") will find the image tag contained in the first td element.

$($(this.parentNode).find("img")).attr("src")

Answer 4

You need to clean up your code a bit as you have a random <span> and the first <td> isn't closed. Your id's need to be wrapped in double quotes.

http://jsfiddle.net/pjdicke/tQ5vr/5/

<table>
   <tr class="test_file">
      <td id="img_id"><img src="http://www.abmuku.com/wp-content/uploads/2012/04/google-logo-small.jpg" /></td>
      <td colspan=2 id="fileName"><button>file name</button></td>
   </tr>
</table>

$('button').on('click', function(){
    $(this).closest('tr').find('td img').attr('src','http://atoralhistory.uconn.edu/images/Yahoo_logo_small.gif');
});

Answer 5

Try with this

$(this).siblings().find('img').prop('src','your_image_url');

DEMO

Answer 6

You have to replace the new_src variable.

$(function() {
   $('#fileName').on('click', function() {
      $(this).closest('tr').find('img').attr('src', new_src);
   });
});