自定义属性data-id

  在做项目的时候，用到了自定义属性，我就定义了一个data-id,然后给各个li标签定义了data-id属性，从1-7，依次增大的;

代码如下：

<ul>
<li data-id="1">我是标签1</li>
<li data-id="2">我是标签2</li>
<li data-id="3">我是标签3</li>
<li data-id="4">我是标签4</li>
<li data-id="5">我是标签5</li>
<li data-id="6">我是标签6</li>
<li data-id="7">我是标签7</li>
</ul>

  后续的话，我又需要在for循环里取得 data-id = i 值的li标签，

然后我就犯难了，通过在网上查找，都是一些 input[name=’class’] 的选取方法，

我也按着这个思路试了试，通过jquery获取对应的li：

var data = $('li[data-id=4]').html();
console.log(data);

console.log结果：



由此可见，这个方法是可行的，然后获取变量i所对应的标签，我们用拼接的方法试试：

var i = 1;
var data = $('li[data-id='+ i +']').html();
console.log(data);

console.log结果：



所以这样就可以取得对应data-id标签的li元素了，又是一个小收获；

还有一点是，通过自定义data-id 的值，给li排序

获取到各个li，然后push到一个数组中，给数组排序：

var list = $('.box li');
var arr = [];
for(var i=0;i<list.length;i++){
arr.push(list[i]);
}
arr.sort(function(a,b){
return a.getAttribute('data-id')-b.getAttribute('data-id');
});
for(var i=0;i<list.length;i++){
$('ul.box').append(arr[i]);
}

这样得到的li就是按照data-id的顺序重新排列的，我们的目的就达到了；