如何获得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); });
