如何获取data-id属性？

11 回答

• 2

  要获取属性 data-id 的内容（如在 <a data-id="123">link</a> 中），您必须使用

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

  或.data()（如果您使用较新的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.

  回复于 2024-05-15T15:33:56+08:00
• 130

  使用jQuery：

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

  回复于 2024-05-15T15:33:56+08:00
• 68

  如果你不关心旧的IE浏览器，你也可以使用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"
  

  演示：http://html5demos.com/dataset

  完整浏览器支持列表：http://caniuse.com/#feat=dataset

  回复于 2024-05-15T15:33:56+08:00
• 6

  重要的提示 . 请记住，如果您通过JavaScript动态调整 data- attribute ，它将不会反映在 data() jQuery函数中 . 您还必须通过 data() 函数进行调整 .

  <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
  

  回复于 2024-05-15T15:33:56+08:00
• 8

  HTML

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

  JS

  $(this).data().value;
  

  要么

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

  ANS：50

  适合我！

  回复于 2024-05-15T15:33:56+08:00
• 8

  惊讶没人提到：

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

  这是工作示例：https://jsfiddle.net/ed5axgvk/1/

  回复于 2024-05-15T15:33:56+08:00
• 1316

  这段代码将返回数据属性的值，例如：data-id，data-time，data-name等 . ，我已经为id显示了

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

  JS：

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

  //获取data-id - > a1的值

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

  //这将改变data-id - > a2

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

  //获取data-id - > a2的值

  回复于 2024-05-15T15:33:56+08:00
• 6

  var id = $(this).dataset.id
  

  适合我！

  回复于 2024-05-15T15:33:56+08:00
• 9

  使用自己的 id 访问数据属性对我来说有点容易 .

  $("#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>
  

  回复于 2024-05-15T15:33:56+08:00
• 2

  如果我们想使用现有的原生 JavaScript 来检索或更新这些属性，那么我们可以使用getAttribute和setAttribute方法来实现，如下所示：

  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

  回复于 2024-05-15T15:33:56+08:00
• 36

  我用$ .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
  

  回复于 2024-05-15T15:33:56+08:00