Home > Web Front-end > JS Tutorial > body text

javascript node sorting implementation code_javascript skills

WBOY
Release: 2016-05-16 18:11:13
Original
1311 people have browsed it

In IE we can use sourceIndex, and in standard browsers we can use compareDocumentPosition, but what about older standard browsers? What about XML? Therefore, we need to determine the relationship between a node and another node based on its attributes.
My idea is very simple. If they are the same, return 0 (for deduplication). If their parent nodes are the same, then determine the order of the two based on nextSibling. Otherwise, find their nearest common ancestor and the other two Aren't the two parent nodes closest to this ancestor (from a human point of view, uncle and father) the same situation as the parent node? ! Their order is determined based on nextSibling, and their order is the order of their children (so it is very important to have a father named Li Gang, in this hereditary world!) However, sometimes the most recent common ancestor is one of the two parties, That's certainly as recent as it gets.
The remaining problem is to find the most recent common ancestor. My idea is also very simple, not necessarily efficient. After all, mathematics has been abandoned in universities. Continue to get their parent nodes upward until the top HTML element, together with the original node, forms two arrays. Then take the last elements of the array each time for comparison. If they are the same, remove them, because the same ones are common ancestors. If they are not the same, just take one of them.
The following is the test page and source code:
Since window.console is used, it is recommended to view the results under firefox, IE8, and chrome.


[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute
]<script> window.onload = function(){ function shuffle(a) { var array = a.concat(); var i = array.length; while (i) { var j = Math.floor(Math.random()*i); var t = array[--i]; array[i] = array[j]; array[j] = t; } return array; } var log =function(s){ window.console && window.console.log(s) } var sliceNodes = function(arr){ var ret = [], i = arr.length; while (i) ret[--i] = arr[i]; return ret; } var sortNodes = function(a,b){ var p = "parentNode",ap = a[p],bp = b[p]; if(a === b){ return 0 }else if(ap === bp){//如果父节点相同 while(a = a.nextSibling){//比较这两兄弟 if(a === b){ return -1 } } return 1 }else if(!ap){ return -1 }else if(!bp){ return 1 } var al = [], ap = a while(ap && ap.nodeType === 1){ al[al.length] = ap ap = ap[p] } var bl = [],bp = b; while(bp && bp.nodeType === 1){ bl[bl.length] = bp bp = bp[p] } ap = al.pop(); bp = bl.pop(); while(ap === bp){//去掉所有公共祖先 ap = al.pop(); bp = bl.pop(); } if(ap && bp){//比较伯父与父亲 while(ap = ap.nextSibling){ if(ap === bp){ return -1 } } return 1 } //如果是最近公共祖先与某一方进行比较 return ap ? 1 : -1 } var els = document.getElementsByTagName("div") els = sliceNodes(els);//转换成纯数组 log(els); els = shuffle(els);//洗牌(模似用自定义的选择器取得的节点集合情况) log(els); els = els.sort(sortNodes) log(els) } </script>
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!