多标签点击排序问题(获取点击标签的顺序等)

1.问题描述：

有n个同样的标签，随便点击一个如何确定点击的是哪个标签？

进一步问题：



来自百度笔试

2.解决多标签点击获取顺序问题，

<ul>
<li>5</li>
<li>2</li>
<li>3</li>
<li>88</li>
<li>00</li>
</ul>

var li = document.getElementsByTagName('li');
//ByTagName或者ClassName都获取页面所有的标签和class,返回一个集合（不是数组）。
document.onclick = function(e){
for(var i=0;i<li.length;i++){
if(li[i]==e.target){
alert(i);
break;
}
}
}

以上代码可以实现点击一个li标签就会返回其在父元素下的顺序，分析如下：

获取的li集合不是Array类型，但具有length属性，可以用li[x]访问子元素也就是一个节点。定义一个监听事件，通过e.target判断是哪个li被点击。

网上看到一些解决这个问题的方法，主流是一个通过for循环给给每个li添加监听事件的，当li标签很多，性能就会变差，我的代码比较简洁。需要注意的是，返回的li是页面所有的li标签，所以页面有多个ul,ol时，需要区分出你想判断的li块，建议给每个li加一个class.

2.多标签点击排序问题–百度笔试题目的解决：

（只实现了点击降序，升序思路一样的）

var th = document.getElementsByTagName('th');
var td = document.getElementsByTagName('td');
var tr = document.getElementsByTagName('tr');
var table = document.getElementsByTagName('table');
//th,td都是返回的节点集合，不是数组类型不可以用forEach,find这些方法，只可以用for 然后th[i]选择元素
//console.log(td);
var table = document.getElementsByTagName('table');
document.onclick = function(e){
for(var i=0;i<th.length;i++){
if(th[i]==e.target){
console.log(i);
sortBy(i);
break;
}
}
}
function sortBy(i){
var array=[];
for(var j=1;j<tr.length;j++){
array.push(tr[j]);
}
array.sort(function(a,b){return a.cells[i].innerText-b.cells[i].innerText;});
var iHTML = "";
array.forEach(function(elem){
iHTML+='<tr>'+elem.innerHTML+'</tr>';
});
table[0].innerHTML = '<table>'+'<tr>'+tr[0].innerHTML+'</tr>'+iHTML+'</table>';
}

效果展示（点击敏捷那一栏之前和之后）





关键点分析：获取顺序就是之前那个思路，这里主要是解决排序的思路。

核心是用tr下cells属性包含其下的td集合，

return a.cells[i].innerText-b.cells[i].innerText;

就可以达到排序的目的，要活用sort函数。把集合内容提取出来放在数组然后排序，之后在把其innerHTML进行拼接，付给table，就可以实现点击排序要求了。

反思：cells这个属性可能不常见，可能只对table有效，如果遇到ul li呢？

发现children属性很好用，会返回子元素的集合而不会像childNodes一样需要筛选。

<ul id="myul">
<li>5</li>
<li>2</li>
<li>3</li>
<li>88</li>
<li>00</li>
</ul>
var myul = document.getElementById("myul");
console.log(myul.children);