当前位置 : 首页 » 互动问答 » 正文

How to get the data-id attribute?

分类 : 互动问答 | 发布时间 : 2011-03-15 17:44:30 | 评论 : 11 | 浏览 : 1128408 | 喜欢 : 642

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>

回答(11)

  • 1楼
  • 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.

  • 2楼
  • 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

  • 3楼
  • 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>
    

    js:

    $(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
    
  • 4楼
  • If you are not concerned about old IE 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>
    

    JS

    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

  • 5楼
  • HTML

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

    JS

    $(this).data().value;
    

    or

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

    ANS : 50

    Works for me!

  • 6楼
  • I use $.data - http://api.jquery.com/jquery.data/

    //Set value 7 to data-id 
    $.data(this, 'id', 7);
    
    //Get value from data-id
    alert( $(this).data("id") ); // => outputs 7
    
  • 7楼
  • var id = $(this).dataset.id
    

    works for me!

  • 8楼
  • Surprised no one mentioned:

    <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/

  • 9楼
  • Accessing data attribute with its own id is 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>

  • 10楼
  • using jQuery:

      $( ".myClass" ).load(function() {
        var myId = $(this).data("id");
        $('.myClass').attr('id', myId);
      });
    
  • 11楼
  • This piece of code will return the value of the data attributes eg: data-id, data-time, data-name etc.., I have shown for the id

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

    js:

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

    // get the value of the data-id -> a1

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

    // this will change the data-id -> a2

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

    // get the value of the data-id -> a2

相关阅读:

How to move an element into another element?

How to move an element into another element?

Set HTTP header for one request

Remove duplicates from an array of objects in JavaScript

Can I call jquery click() to follow an <a> link if I haven't bound an event handler to it with bind or click already?

Can I call jquery click() to follow an <a> link if I haven't bound an event handler to it with bind or click already?

Check whether a string matches a regex in JS

jQuery event to trigger action when a div is made visible

jQuery event to trigger action when a div is made visible

Check if user is using IE with jQuery