我如何使用jQuery获取div中的属性

Question

this is code from firebug, i want to get data-name value

<div id="listdata">
     name1
      <img src="images1" data-name="data01">
     name2
      <img src="images2" data-name="data02">
     name3
      <img src="images2" data-name="data03">

how can i get attribute data-name by click with Jquery

Answer 1

You can use data .

$('#images1').data('name');

To get the data-name of the clicked image.

$(document).ready(function () {
    $('#listdata').on('click', 'img', function () {
        alert($(this).data('name'));
    });
});

Demo: https://jsfiddle.net/tusharj/a0468f8k/

Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

Docs: http://api.jquery.com/data/

Answer 2

I'm assuming clicked on img itself, then try this code :

$(function(){
  $('#listdata').on('click','img', function(){
    alert($(this).data('name'));
  });
});

Answer 3

<div id="listdata">
     name1
    <img src="images1" data-name="data01" />
     name2
    <img src="images2" data-name="data02" />
     name3
    <img src="images2" data-name="data03" />
</div>




$("#listdata img").click(function(){
    console.log($(this).data("name"));
});

http://jsfiddle.net/re1Lz451/1/

By use of jQuery library data can be fetch easily, there is a method data() apply on object.