fetch value img src jquery

Question

whats the proper way to fetch the value of img src trough the following structure. The code below is returning empty.

JS bin (click on smiley): https://jsbin.com/lelaxam/edit?html,js,output

NOTICE: When i remove the A HREF tag around the image i receive the image src, if i place the A HREF tags around IMG i dont receive the IMG SRC

HTML:

<td class="sim-row-edit" data-type="testtest" style="padding-right:10px">
<a href="http://crezzur.com" target="_blank">
<img src="https://img.smileys.nl/152/winky.png" alt="" border="0" width="42" height="42" />
</a>
</td>

JQUERY:

if (big_parent.attr("data-type") == 'testtest') {
$("#sim-edit-testtest .image").val(big_parent.children('img').attr("src"));
$("#sim-edit-testtest .url").val(big_parent.children('a').attr("href"));

Answer 1

You should use jQuery.data to fetch values of data- attributes, not jQuery.attr .

Once you have successfully selected your image, you can then just use .attr('src') as you have above.

You have a problem in your code though, you are trying to get the image incorrectly. Your HTML code shows:

<img id="sim-edit-testtest .image" src="https://img.smileys.nl/152/winky.png" alt="" border="0" width="42" height="42" />

So $('#sim-edit-testtest .image').find('img') is well off the mark. There should be no space between #sim-edit-testtest and .image in the selector, as it's not a child, it's one element with both the class and id, and there's no child img element, it already is the img element. Try the code below instead.

if ( big_parent.data('type') == 'testtest' ) {
  $('#sim-edit-testtest.image').attr('src');
}

Truth be told, having .image in the selector is also a bit moot as IDs should already be unique within a page, so it can be simplified further to:

if ( big_parent.data('type') == 'testtest' ) {
  $('#sim-edit-testtest').attr('src');
}

Answer 2

您必须像这样使用它：

$('#sim-edit-testtest img').attr('src');

Answer 3

This code grabs and display IMG SRC & A HREF like you can see in this example: https://jsbin.com/lelaxam/edit?html,js,output

Only issue here is it grabs the FIRST img src if finds, how do i select the img src which i pressed on ?

$("#sim-edit-testtest .image").val($('img', 'a').attr("src"));
$("#sim-edit-testtest .url").val(big_parent.children('a').attr("href"));