javascript - How can I get the data-id attribute? - Stack Overflow

admin管理员组

文章数量:1125924

I'm using the jQuery Quicksand plugin. I need to get the data-id of the clicked item and pass it to a webservice.

How do I get the data-id attribute? I'm using the .on() method to re-bind the click event for sorted items.

$("#list li").on('click', function() {
  //  ret = DetailsView.GetProject($(this).attr("#data-id"), OnComplete, OnTimeOut, OnError);
  alert($(this).attr("#data-id"));
});

<script src=".3.1.slim.min.js"></script>

<ul id="list" class="grid">
  <li data-id="id-40" class="win">
    <a id="ctl00_cphBody_ListView1_ctrl0_SelectButton" class="project" href="#">
      <img src="themes/clean/images/win.jpg" class="project-image" alt="get data-id" />
    </a>
  </li>
</ul>

I'm using the jQuery Quicksand plugin. I need to get the data-id of the clicked item and pass it to a webservice.

How do I get the data-id attribute? I'm using the .on() method to re-bind the click event for sorted items.

$("#list li").on('click', function() {
  //  ret = DetailsView.GetProject($(this).attr("#data-id"), OnComplete, OnTimeOut, OnError);
  alert($(this).attr("#data-id"));
});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<ul id="list" class="grid">
  <li data-id="id-40" class="win">
    <a id="ctl00_cphBody_ListView1_ctrl0_SelectButton" class="project" href="#">
      <img src="themes/clean/images/win.jpg" class="project-image" alt="get data-id" />
    </a>
  </li>
</ul>

• javascript
• html
• jquery
• custom-data-attribute

Share Improve this question Follow edited Jul 31, 2021 at 18:50 Peter Mortensen 31.6k2222 gold badges109109 silver badges133133 bronze badges asked Mar 15, 2011 at 9:44 Bruce AdamsBruce Adams 12.3k66 gold badges3030 silver badges3737 bronze badges 4

• 67 Notice to new visitors: JQuery's .live() method has been deprecated in favor of .on() – dendini Commented Sep 3, 2013 at 12:01
• 6 You should remove the # from the alert, you dont need it :-) – Becs Carter Commented May 25, 2014 at 19:51
• 1 attr("#data-id")) is wrong. corrected: attr("data-id")); – nh-labs Commented Oct 16, 2017 at 0:00
• For select and option elements use: stackoverflow.com/a/12750327/7389293 – carloswm85 Commented Jun 21, 2022 at 16:44

Add a comment  | 

17 Answers 17

Sorted by: Reset to default 2042

To get the contents of the attribute data-id (like in <a data-id="123">link</a>) you have to use

$(this).attr("data-id") // will return the string "123"

or .data() (if you use newer jQuery >= 1.4.3)

$(this).data("id") // will return the number 123

and the part after data- must be lowercase, e.g. data-idNum will not work, but data-idnum will.

If we want to retrieve or update these attributes using existing, native JavaScript, then we can do so using the getAttribute and setAttribute methods as shown below:

Through JavaScript

<div id='strawberry-plant' data-fruit='12'></div>

<script>
// 'Getting' data-attributes using getAttribute
var plant = document.getElementById('strawberry-plant');
var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12'

// 'Setting' data-attributes using setAttribute
plant.setAttribute('data-fruit','7'); // Pesky birds
</script>

Through jQuery

// Fetching data
var fruitCount = $(this).data('fruit');
OR 
// If you updated the value, you will need to use below code to fetch new value 
// otherwise above gives the old value which is intially set.
// And also above does not work in ***Firefox***, so use below code to fetch value
var fruitCount = $(this).attr('data-fruit');

// Assigning data
$(this).attr('data-fruit','7');

Read this documentation

Important note. Keep in mind, that if you adjust the data- attribute dynamically via JavaScript it will not be reflected in the data() jQuery function. You have to adjust it via data() function as well.

<a data-id="123">link</a>

JavaScript:

$(this).data("id") // returns 123
$(this).attr("data-id", "321"); //change the attribute
$(this).data("id") // STILL returns 123!!!
$(this).data("id", "321")
$(this).data("id") // NOW we have 321

If you are not concerned about old Internet Explorer browsers, you can also use HTML5 dataset API.

HTML

<div id="my-div" data-info="some info here" data-other-info="more info here">My Awesome Div</div>

JavaScript

var myDiv = document.querySelector('#my-div');

myDiv.dataset.info // "some info here"
myDiv.dataset.otherInfo // "more info here"

Demo: http://html5demos.com/dataset

Full browser support list: http://caniuse.com/#feat=dataset

This piece of code will return the value of the data attributes. For example: data-id, data-time, data-name, etc.

I have shown it for the id:

<a href="#" id="click-demo" data-id="a1">Click</a>

JavaScript: Get the value of the data-id -> a1

$(this).data("id");

JQuery: This will change the data-id -> a2

$(this).data("id", "a2");

JQuery: Get the value of the data-id -> a2

$(this).data("id");

You can also use:

<select id="selectVehicle">
    <option value="1" data-year="2011">Mazda</option>
    <option value="2" data-year="2015">Honda</option>
    <option value="3" data-year="2008">Mercedes</option>
    <option value="4" data-year="2005">Toyota</option>
</select>

$("#selectVehicle").change(function () {
    alert($(this).find(':selected').data("year"));
});

Here is the working example: https://jsfiddle.net/ed5axgvk/1/

HTML

<span id="spanTest" data-value="50">test</span>

JavaScript

$(this).data().value;

or

$("span#spanTest").data().value;

ANS: 50

Accessing the data attribute with its own id is a bit easy for me.

$("#Id").data("attribute");

function myFunction(){
  alert($("#button1").data("sample-id"));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="button1" data-sample-id="gotcha!" onclick="myFunction()"> Clickhere </button>

var id = $(this).dataset.id

works for me!

I use $.data:

//Set value 7 to data-id
$.data(this, 'id', 7);

//Get value from data-id
alert( $(this).data("id") ); // => outputs 7

Using jQuery:

$(".myClass").load(function() {
  var myId = $(this).data("id");
  $('.myClass').attr('id', myId);
});

Try

this.dataset.id

$("#list li").on('click', function() {
  alert( this.dataset.id );
});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<ul id="list" class="grid">
  <li data-id="id-40" class="win">
    <a id="ctl00_cphBody_ListView1_ctrl0_SelectButton" class="project" href="#">
      <img src="themes/clean/images/win.jpg" class="project-image" alt="get data-id >>CLICK ME<<" />
    </a>
  </li>
</ul>

for pure js

 let btn = document.querySelector('.your-btn-class');
 btn.addEventListener('click',function(){
 console.log(this.getAttribute('data-id'));
 })

The issue is you are not specifying the option or selected option of dropdown or list, Here is an example for dropdown, i am assuming a data attribute data-record.

$('#select').on('change', function(){
        let element = $("#visiabletoID");
        element.val($(this).find(':selected').data('record'));
    });

For those looking to dynamically remove and re-enable the tooltip, you can use the dispose and enable methods. See .tooltip('dispose').

HTML 5 introduced dataset: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset, the browser compa But for older browser you can use getAttribute method to get the data-* attributes.

const getDataAttr = (id) => {
  if(currentNode.dataset) return currentNode.dataset[id];
  return currentNode.getAttribute("data-"+id);
}

The reason to use dataset is constant lookup time, get attribute would not be a constant time lookup, it'll go through all the attributes of the html element and then return the data once it'll find the exact attribute match.

The reason to provide this answer is that nobody mentioned about the browser compatibility and lookup time with the given solution, although both of these solutions are already given by people.

I have a span. I want to take the value of attribute data-txt-lang, which is used defined.

$(document).ready(function ()
{
    <span class="txt-lang-btn" data-txt-lang="en">EN</span>
    alert($('.txt-lang-btn').attr('data-txt-lang'));
});

本文标签： javascriptHow can I get the dataid attributeStack Overflow