在做项目的时候,用到了自定义属性,我就定义了一个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的顺序重新排列的,我们的目的就达到了;