Jquery: Get Data Attribute

How can I get the data-id attribute?

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.

Selecting element by data attribute with jQuery

$('*[data-customerID="22"]');

You should be able to omit the *, but if I recall correctly, depending on which jQuery version you’re using, this might give faulty results.

Note that for compatibility with the Selectors API (document.querySelector{,all}), the quotes around the attribute value (22) may not be omitted in this case.

Also, if you work with data attributes a lot in your jQuery scripts, you might want to consider using the HTML5 custom data attributes plugin. This allows you to write even more readable code by using .dataAttr('foo'), and results in a smaller file size after minification (compared to using .attr('data-foo')).

jQuery: get data attribute

You could use the .attr() function:

$(this).attr('data-fullText')

or if you lowercase the attribute name:

data-fulltext="This is a span element"

then you could use the .data() function:

$(this).data('fulltext')

The .data() function expects and works only with lowercase attribute names.

How to get a value of data-attribute with jquery

only Remove [] :

 var rowId = $("#someTest tr").last().attr("data-userid");

Final code :

<html>    <title>This is test</title>        <head>    </head>    <body>        <table id="tblList">    <tbody id="someTest">      <tr data-userid="801992084067">      <tr data-userid="451207954179">      <tr data-userid="310896831399">      <tr data-userid="863939754980">      <tr data-userid="1123542226482">    </tbody>  </table>                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>        <script>            $(document).ready(function(){       var rowId = $("#someTest tr").last().attr("data-userid");    alert(rowId);       })        </script>    </body></html>

get data attribute and set new value

$("flipUpMenuBox") need to be $("#flipUpMenuBox")

Working snippet:-

$( document ).ready(function() {  var btnFlip = $("#flipElement");  var flipUpElement = $("#flipUpMenuBox");  btnFlip.click(function(){    if(flipUpElement.attr('data-flip') == 'false'){ // use ==      flipUpElement.attr('data-flip','true');    }else{      flipUpElement.attr('data-flip','false');    }  });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="flipUpMenu" id="flipUpMenuBox" data-flip="false"></div><button id="flipElement">Flip Up </button>

Get value of data attribute of li element using jQuery

You can follow below two ways to read data attribute value of second li only

BTW: you have missed closing double quote for class of ul -- <ul class="country-list">, so correct it in your source code

$(function(){   console.log('Data with "data" ' + $('ul.country-list li.country:eq(1)').data('dial-code'));   //OR   console.log('Data with "attr" ' + $('ul.country-list li.country:eq(1)').attr('data-dial-code')); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>    <ul class="country-list">        <li class="country preferred active" data-dial-code="1" data-country-code="us">        </li>    </ul>
    <ul class="country-list">        <li class="country preferred active" data-dial-code="48" data-country-code="pl">        </li>    </ul>

Get data attribute value of the Nth element using jQuery

The problem is because although get(N) returns the Nth element in the matched set, it returns the underlying DOMElement which does not have an attr() method and hence the error.

To fix this you could use eq() which does the same job, but returns the element in a jQuery object:

$("p.expiryItem").eq(0).data('id') // zero-based

Or you could use the :nth-child selector:

$("p.expiryItem:nth-child(1)").data('id') // one-based

Note the preferred use of data() here to retrieve the data-* attribute.

jQuery find element by data attribute value

Use Attribute Equals Selector

$('.slide-link[data-slide="0"]').addClass('active');

Fiddle Demo

.find()

it works down the tree

Get the descendants of each element
in the current set of matched elements, filtered by a selector, jQuery object, or element.

Unable to get Data Attribute value of dynamically generated buttons in jQuery

When you use arrow function () => {} then jquery don't know what this refers to so use:

$(document).on('click', '.aButton', (e) => {
  let id = $(e.target).attr('data-id') || $(e.target).closest('.aButton').attr('data-id');
  console.log(id);
})

Demo

$(document).on('click', '.aButton', (e) => {
  let id = $(e.target).attr('data-id') || $(e.target).closest('.aButton').attr('data-id');
  console.log(id);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='btn btn-sm btn-primary aButton' data-id='1234'><i>testers</i></button>
<button class='btn btn-sm btn-primary aButton' data-id='12345'></button>
<button class='btn btn-sm btn-primary aButton' data-id='12346'></button>
<button class='btn btn-sm btn-primary aButton' data-id='12347'></button>