如何获得data-id属性?

我正在使用jquery quicksand插件。 我需要得到被点击的项目的数据ID并传递给一个web服务。 我如何获得data-id属性? 我正在使用.live()方法重新绑定sorting项目的点击事件。

Html看起来像这样:

 <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/cleanhttp://img.dovov.comwin.jpg" class="project-image" alt="" /> </a> </li> </ul> 

而我的JavaScript看起来像这样:

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

要获取属性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 

data-之后的部分必须是小写的,例如data-idNum将不起作用,但是data-idnum将会起作用。

如果我们想要使用现有的本地JavaScript来检索或更新这些属性,那么我们可以使用getAttribute和setAttribute方法来完成这些工作,如下所示:

通过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> 

通过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'); 

阅读本文档

重要的提示。 请记住,如果您通过JavaScriptdynamic调整data- 属性 ,则不会反映在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 

如果您不关心旧的IE浏览器,也可以使用HTML5数据集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

HTML

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

JS

 $(this).data().value; 

要么

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

ANS:50

为我工作!

我使用$ .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 
 var id = $(this).dataset.id 

为我工作!

惊讶没有人提到:

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

使用自己的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> 

使用jQuery:

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