How to get the Image "title" attribute value into another element using jQuery

Question

I need to display the title value of the image (class name: media_image) in another p tag (class name: media_folder_title) for every row. But I can't able to get the value. I have attached the sample code here.

Screenshot:

HTML Code:

jQuery Code:

$(".media_folder img.media_image").each(function(){
    var imgtitle = $(this).attr("title");
    console.log(imgtitle);
    setTimeout(function(){
        console.log("settimout ok");
        $(this).append(""+imgtitle+"");
    }, 3000);
});

user_14595300 · Answer

Change the selectors in the first line into:

.media_folder img .media_image

Sometimes space is important.

user_863110 · Answer

The problem is with the $(this) in the timeout because it's no longer the image but the window.

Also, append aims to append an element inside another element. It's not possible appending an element inside an image. As your snippet implies, you want to append the p tag after the image, after is the right function for that.

$(".media_folder img.media_image").each(function() {
  const $img = $(this);
  const imgtitle = $img.attr("title");

  setTimeout(function() {
    $img.after("" + imgtitle + "");
  }, 3000);
});

user_14837008 · Answer

Your problem is that you are trying to append something inside an img tag, which is not possible - as with a few other html elements.

What you are looking for is $.after()

Try $(this).after($('

').text(imgtitle))

How to get the Image "title" attribute value into another element using jQuery

3 Answers