How to display image with this html and jquery code

Question

I want to display an image but with code like this:

HTML:

<a href="javascript:" class="menuin" from="account.png"></a>
<a href="javascript:" class="menuin" from="home.png"></a>

Jquery:

$(".menuin").html('<img src="img/'+$(this).attr('from')+'">');

I have a trouble on jquery code. I think that is wrong code. I want to display an image according to from attribute. can you help me please?

.html takes a callback function as it's parameter - see @Satpal's answer below — Matthew Herbst
– Matthew Herbst, Commented Dec 10, 2018 at 6:48

Satpal · Accepted Answer · 2018-12-10 06:47:01Z

3

You should use .html(function) method, it will iterate .menuin elements and use current element context i.e. this to get the relevant attribute value.

I would also recommend to use data-* prefixed custom attributes.

$(".menuin").html(function(index, oldHtml) {
  return '<img src="img/' + $(this).data('from') + '">'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:" class="menuin" data-from="account.png"></a>
<a href="javascript:" class="menuin" data-from="home.png"></a>

answered Dec 10, 2018 at 6:47

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display image with this html and jquery code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related