I can only get the value of only one attribute

Question

I have this code and I would like it when the mouse goes over the image 01 it takes the date-id of Image 01 when it passes in Image 02 it takes the date-id of Image 02 . But for some reason it does not matter over which image i pass the mouse it just takes the date-id of the image 01

 jQuery(document).ready(function() { var me = jQuery(this); jQuery(".post-thumb").on("mouseover", function() { var data_id2 = jQuery('img', me).attr("data-id"); console.log(data_id2); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row list-group"> <div class="item large-3 medium-6 columns end group-item-grid-default"> <div class="post thumb-border" style="height: 20px;"> <div class="post-thumb"> <img src="image01.jpg" alt="Image 01" data-id="000001"> </div> <!--post-thumb--> </div> <!--post thumb-border--> </div> <!--item--> <div class="item large-3 medium-6 columns end group-item-grid-default"> <div class="post thumb-border" style="height: 20px;"> <div class="post-thumb"> <img src="image02.jpg" alt="Image 02" data-id="000002"> </div> <!--post-thumb--> </div> <!--post thumb-border--> </div> <!--item--> </div> <!--item--> </div> 

Answer 1

Since you are declaring me out side of the event ( mouseover ) handler function, it's not changing when the event fires. Declare me inside of the event handler function:

 jQuery(document).ready(function() { jQuery(".post-thumb").on("mouseover", function() { var me = jQuery(this); var data_id2 = jQuery('img', me).attr("data-id"); console.log(data_id2); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row list-group"> <div class="item large-3 medium-6 columns end group-item-grid-default"> <div class="post thumb-border" style="height: 277px;"> <div class="post-thumb"> <img src="image01.jpg" alt="Image 01" data-id="000001"> </div> <!--post-thumb--> </div> <!--post thumb-border--> </div> <!--item--> <div class="item large-3 medium-6 columns end group-item-grid-default"> <div class="post thumb-border" style="height: 277px;"> <div class="post-thumb"> <img src="image02.jpg" alt="Image 02" data-id="000002"> </div> <!--post-thumb--> </div> <!--post thumb-border--> </div> <!--item--> </div> <!--item--> </div> 

Answer 2

You need to find the img of currently hovered item. You can do $(this).find('img') .

 jQuery(document).ready(function() { jQuery(".post-thumb").on("mouseover", function() { var data_id2 = jQuery(this).find('img').attr("data-id"); console.log(data_id2); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row list-group"> <div class="item large-3 medium-6 columns end group-item-grid-default"> <div class="post thumb-border" style="height: 277px;"> <div class="post-thumb"> <img src="image01.jpg" alt="Image 01" data-id="000001"> </div> <!--post-thumb--> </div> <!--post thumb-border--> </div> <!--item--> <div class="item large-3 medium-6 columns end group-item-grid-default"> <div class="post thumb-border" style="height: 277px;"> <div class="post-thumb"> <img src="image02.jpg" alt="Image 02" data-id="000002"> </div> <!--post-thumb--> </div> <!--post thumb-border--> </div> <!--item--> </div> <!--item--> </div> 

Answer 3

It was due to the this is come from when the document loaded,it should come from the mouseover event

 jQuery(document).ready(function() { jQuery(".post-thumb").on("mouseover", function() { var data_id2 = jQuery('img', this).attr("data-id"); console.log(data_id2); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row list-group"> <div class="item large-3 medium-6 columns end group-item-grid-default"> <div class="post thumb-border" style="height: 277px;"> <div class="post-thumb"> <img src="image01.jpg" alt="Image 01" data-id="000001"> </div> <!--post-thumb--> </div> <!--post thumb-border--> </div> <!--item--> <div class="item large-3 medium-6 columns end group-item-grid-default"> <div class="post thumb-border" style="height: 277px;"> <div class="post-thumb"> <img src="image02.jpg" alt="Image 02" data-id="000002"> </div> <!--post-thumb--> </div> <!--post thumb-border--> </div> <!--item--> </div> <!--item--> </div>