div 使用 javascript 或 jquery 排序?
div sorting with javascript or jquery?
这是一个由两部分组成的问题。
1)我希望按字母顺序对 div 进行排序,这是有人帮我做的,它适用于 Firefox 和 Chrome,但它在 IE8 中不起作用,因为你必须填充数组,我不知道该怎么做。一个朋友告诉我你可以使用 Jquery 并且它适用于所有浏览器。那么有没有一种方法可以使用 Jquery 按字母顺序对 div 进行排序,这样我就不必填充数组(我不知道该怎么做)或者是否有一个 javascript IE8解决方案?
我是编码新手,所以一个工作示例会很有帮助。谢谢!
这是 javascript 和 div:
var VanillaRunOnDomReady = function() {
var main = document.getElementById( 'main' );
[].map.call( main.children, Object ).sort( function ( a, b ) {
return a.id > b.id;
}).forEach( function ( elem ) {
main.appendChild( elem );
});
}
var alreadyrunflag = 0;
if (document.addEventListener)
document.addEventListener("DOMContentLoaded", function(){
alreadyrunflag=1;
VanillaRunOnDomReady();
}, false);
else if (document.all && !window.opera) {
document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>');
var contentloadtag = document.getElementById("contentloadtag")
contentloadtag.onreadystatechange=function(){
if (this.readyState=="complete"){
alreadyrunflag=1;
VanillaRunOnDomReady();
}
}
}
window.onload = function(){
setTimeout("if (!alreadyrunflag){VanillaRunOnDomReady}", 0);
}
<div id="main">
<div id="danger">7</div>
<div id="angel">1</div>
<div id="enormous">8</div>
<div id="correct">4</div>
<div id="forever">11</div>
<div id="backyard">2</div>
</div>
2) 当某个日期过去时,是否有一个脚本可以翻转顺序(ei 从 a - z 到 z - a)。例如,从本月的第一天到本月的第十五天,我希望第 1 部分中的脚本按字母顺序排列 (a - z),但从第 16 天到第 31 天,则相反 (z - a)。我需要一个脚本来更改另一个脚本还是可以在上面的第一个脚本中实现?
我修复了 IE(所有版本)的排序,另外我为 IE8 添加了排序机制。 (尽管 IE8 解决方案应该适用于所有浏览器)。
var VanillaRunOnDomReady = function() {
var main = document.getElementById( 'main' );
if (Array.prototype.map && Array.prototype.forEach)
{
//this funky bit can be done by all modern browsers. Sorting fixed for IE.
Array.prototype.map.call( main.children, Object ).sort( function ( a, b ) {
if (a.id > b.id) return 1;
if (a.id < b.id) return -1;
return 0;
}).forEach(function(element){
main.appendChild(element);
});
}
else
{
//this bit uses old fashioned coding. No querySelectors and fancy array functions.
var allDivs = main.childNodes;
var store = [];
//push all divs into an array
for (var i = 0; i < allDivs.length; ++i)
{
if (allDivs[i].nodeType != 3 && allDivs[i].tagName && allDivs[i].tagName.toLowerCase() == "div")
{
store.push(allDivs[i]);
}
}
//sort the array
store.sort(function ( a, b ) {
if (a.id > b.id) return 1;
if (a.id < b.id) return -1;
return 0;
});
//reset the sorted divs.
for (var i = 0; i < store.length; ++i)
{
main.appendChild(store[i]);
}
}
}
var alreadyrunflag = 0;
if (document.addEventListener){
document.addEventListener("DOMContentLoaded", function(){
alreadyrunflag=1;
VanillaRunOnDomReady();
}, false);
}
else if (document.all && !window.opera) {
VanillaRunOnDomReady();
alreadyrunflag = 1;
}
window.onload = function(){
setTimeout("if (!alreadyrunflag){VanillaRunOnDomReady}", 0);
}
<div id="main">
<div id="danger">7</div>
<div id="angel">1</div>
<div id="enormous">8</div>
<div id="correct">4</div>
<div id="forever">11</div>
<div id="backyard">2</div>
</div>
至于第二个:
我只是将 div 的数量分成两组。一到十五,一从十六。然后对它们进行适当排序并将它们附加到 main div
.
这是一个由两部分组成的问题。
1)我希望按字母顺序对 div 进行排序,这是有人帮我做的,它适用于 Firefox 和 Chrome,但它在 IE8 中不起作用,因为你必须填充数组,我不知道该怎么做。一个朋友告诉我你可以使用 Jquery 并且它适用于所有浏览器。那么有没有一种方法可以使用 Jquery 按字母顺序对 div 进行排序,这样我就不必填充数组(我不知道该怎么做)或者是否有一个 javascript IE8解决方案?
我是编码新手,所以一个工作示例会很有帮助。谢谢!
这是 javascript 和 div:
var VanillaRunOnDomReady = function() {
var main = document.getElementById( 'main' );
[].map.call( main.children, Object ).sort( function ( a, b ) {
return a.id > b.id;
}).forEach( function ( elem ) {
main.appendChild( elem );
});
}
var alreadyrunflag = 0;
if (document.addEventListener)
document.addEventListener("DOMContentLoaded", function(){
alreadyrunflag=1;
VanillaRunOnDomReady();
}, false);
else if (document.all && !window.opera) {
document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>');
var contentloadtag = document.getElementById("contentloadtag")
contentloadtag.onreadystatechange=function(){
if (this.readyState=="complete"){
alreadyrunflag=1;
VanillaRunOnDomReady();
}
}
}
window.onload = function(){
setTimeout("if (!alreadyrunflag){VanillaRunOnDomReady}", 0);
}
<div id="main">
<div id="danger">7</div>
<div id="angel">1</div>
<div id="enormous">8</div>
<div id="correct">4</div>
<div id="forever">11</div>
<div id="backyard">2</div>
</div>
2) 当某个日期过去时,是否有一个脚本可以翻转顺序(ei 从 a - z 到 z - a)。例如,从本月的第一天到本月的第十五天,我希望第 1 部分中的脚本按字母顺序排列 (a - z),但从第 16 天到第 31 天,则相反 (z - a)。我需要一个脚本来更改另一个脚本还是可以在上面的第一个脚本中实现?
我修复了 IE(所有版本)的排序,另外我为 IE8 添加了排序机制。 (尽管 IE8 解决方案应该适用于所有浏览器)。
var VanillaRunOnDomReady = function() {
var main = document.getElementById( 'main' );
if (Array.prototype.map && Array.prototype.forEach)
{
//this funky bit can be done by all modern browsers. Sorting fixed for IE.
Array.prototype.map.call( main.children, Object ).sort( function ( a, b ) {
if (a.id > b.id) return 1;
if (a.id < b.id) return -1;
return 0;
}).forEach(function(element){
main.appendChild(element);
});
}
else
{
//this bit uses old fashioned coding. No querySelectors and fancy array functions.
var allDivs = main.childNodes;
var store = [];
//push all divs into an array
for (var i = 0; i < allDivs.length; ++i)
{
if (allDivs[i].nodeType != 3 && allDivs[i].tagName && allDivs[i].tagName.toLowerCase() == "div")
{
store.push(allDivs[i]);
}
}
//sort the array
store.sort(function ( a, b ) {
if (a.id > b.id) return 1;
if (a.id < b.id) return -1;
return 0;
});
//reset the sorted divs.
for (var i = 0; i < store.length; ++i)
{
main.appendChild(store[i]);
}
}
}
var alreadyrunflag = 0;
if (document.addEventListener){
document.addEventListener("DOMContentLoaded", function(){
alreadyrunflag=1;
VanillaRunOnDomReady();
}, false);
}
else if (document.all && !window.opera) {
VanillaRunOnDomReady();
alreadyrunflag = 1;
}
window.onload = function(){
setTimeout("if (!alreadyrunflag){VanillaRunOnDomReady}", 0);
}
<div id="main">
<div id="danger">7</div>
<div id="angel">1</div>
<div id="enormous">8</div>
<div id="correct">4</div>
<div id="forever">11</div>
<div id="backyard">2</div>
</div>
至于第二个:
我只是将 div 的数量分成两组。一到十五,一从十六。然后对它们进行适当排序并将它们附加到 main div
.