How can I get the data-id attribute?

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')); });