测试-js如何把html内容,id=0到id=9 从小到大排序显示！谢谢~~~急~~

问题描述

js如何把html内容,id=0到id=9 从小到大排序显示！谢谢~~~急~~

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试test</title>
</head>

<script language="javascript">  

        </script>  

<div id="content">

<div id="cd3">内容3</div>
<div id="cd9">内容9</div>
<div id="cd1">内容1</div>
<div id="cd8">内容8</div>
<div id="cd4">内容4</div>
<div id="cd7">内容7</div>
<div id="cd5">内容5</div>
<div id="cd2">内容2</div>
<div id="cd6">内容6</div>
<div id="cd0">内容0</div>

</div>

<body>
</body>
</html>

想要的效果！！

<div id="content">

<div id="cd0">内容0</div>
<div id="cd1">内容1</div>
<div id="cd2">内容2</div>
<div id="cd3">内容3</div>
<div id="cd4">内容4</div>
<div id="cd5">内容5</div>
<div id="cd6">内容6</div>
<div id="cd7">内容7</div>
<div id="cd8">内容8</div>
<div id="cd9">内容9</div>

</div>

解决方案


<div id="content">

    <div id="cd3">内容3</div>
    <div id="cd9">内容9</div>
    <div id="cd1">内容1</div>
    <div id="cd8">内容8</div>
    <div id="cd4">内容4</div>
    <div id="cd7">内容7</div>
    <div id="cd5">内容5</div>
    <div id="cd2">内容2</div>
    <div id="cd6">内容6</div>
    <div id="cd0">内容0</div>

</div>
<script>
    var arrDOM = [], content = document.getElementById('content'), divs = content.getElementsByTagName('div');
    for (i = 0; i < divs.length; i++) arrDOM[i] = divs[i];
    arrDOM.sort(function (a, b) { return parseInt(/d+/.exec(a.innerHTML)[0]) - parseInt(/d+/.exec(b.innerHTML)[0]) });
    for (i in arrDOM) content.appendChild(arrDOM[i]);
</script>

解决方案二：

先附图,容我这个csdn新手试试怎么贴代码....

解决方案三：

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>测试test</title>
    </head>
    <body>
        <div id="content">
            <div id="cd3">内容3</div>
            <div id="cd9">内容9</div>
            <div id="cd1">内容1</div>
            <div id="cd8">内容8</div>
            <div id="cd4">内容4</div>
            <div id="cd7">内容7</div>
            <div id="cd5">内容5</div>
            <div id="cd2">内容2</div>
            <div id="cd6">内容6</div>
            <div id="cd0">内容0</div>
        </div>
        <script language="javascript">
            //简化 document.getElementById 方法
            function getDomById(eId){
                return document.getElementById(eId);
            }
            //页面初始哈事件
            window.onload=function(){
                if(!confirm("即将为你排序,请注意内容改变")) return;

                //1.定义一个数组
                var divArray = [];
                //2.1获取所以子元素长度
                var length = getDomById('content').childNodes.length;
                //2.将元素按顺序获取,放置到数组中
                for (var i = 0; i < length; i++) {
                    //获取当前元素
                    var currentDom = getDomById(('cd'+i));

                    //懒人兼容
                    if (null == currentDom ) continue;

                    //将元素存进数组
                    divArray[i] = currentDom;
                };
                //3.1清空原来内容
                getDomById('content').innerHTML = "";
                //3.2将数组中排序好的元素添加进去
                for (var i = 0; i < length; i++)
                    getDomById('content').appendChild(divArray[i]);
            }
        </script>
    </body>
</html>

解决方案四：

http://www.w3cfuns.com/article-5600159-1-1.html

解决方案五：

http://blog.csdn.net/paolei/article/details/6805007

解决方案六：

大神我不懂js可以帮忙改好js代码发给我吗~

解决方案七：

 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                var div = $('div').toArray().sort(function(a,b){
                        return parseInt($(a).html()) - parseInt($(b).html())
                });
                $(div).appendTo('body')
            });
        </script>

这段js怎么改成我想要的效果啊~

解决方案八：

<!DOCTYPE>

测试test

内容3解决方案九：

我截图给你！！！

两个页面之间如何传值，急急急
一道acm动态题目，谁帮忙看下。谢谢了
js-请问如何通过JS或者jQuery实现鼠标滑到某个div上页面向左滑动滑出则停止向右同理
js-如何在页面上实现收起展开的效果
javascript-js如何实现添加表格以及在表格上显示内容，如下图效果
数组编号-C++编程：对数组A中的N（0&lt;N&lt;100）个整数从小到大进行连续编号
html jsp js sql-关于删除table一行数据，急！
c语言-求大神给讲解一下啊，我已经懵逼了
jquery Div隐藏当DIV浮动在iframe上时隐藏失效
显示-sqlserver排序问题，如何保存

【云栖快讯】他，一路保送，但可能不是你想象中的学霸；他，曾是微软最年轻的技术管理者，挑战带领跨国团队；他，后来加入阿里，成为阿里西雅图分部的第22名员工；他，就是阿里通用计算平台负责人关涛！通过短视频，为你揭晓他的成长和开发计算平台的经历，以及他对未来的展望！详情请点击

时间： 2024-10-29 11:19:47

测试-js如何把html内容,id=0到id=9 从小到大排序显示！谢谢~急的相关文章

ajax.js里面有内容显示效果，根据ID

ajax|js|显示 ajax.js里面有内容显示效果,根据ID[复制此代码]CODE: var http_request = false; var success=false; var ShowAllListFlag=1; var DisplayArticle=true; function makeRequest(url,cateID) { http_request = false; if (window.XMLHttpRe

JS判断文本框内容改变事件的简单实例

本篇文章主要是对JS判断文本框内容改变事件的简单实例进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 oninput,onpropertychange,onchange的用法 onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效) b)当前对象失去焦点(onblur): onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的: oninput是on

js实现目录链接,内容跟着目录滚动显示的简单实例_javascript技巧

如下所示: <script> require(["jquery", "bootstrap"], function($) { $(function() { $('.left').height(($('body').height() > $(window).height()) ? $('body').height() : $(window).height()); }); var goTo = $(".con"); var guide

js实现将选中内容分享到新浪或腾讯微博_javascript技巧

微博如火如荼,大家都选择用微博带来社会化流量,顺便推广产品和网站,几乎所有的网站都有分享到代码,但是还有一种更快捷的分享方式,javascript就可以实现将选定内容轻松分享到新浪微博和腾讯微博,效果图如下: 将选中的内容分享到新浪微博,腾讯微博实现js代码如下: <STYLE> .img_sina_share { DISPLAY: none; CURSOR: pointer; POSITION: absolute } .img_qq_share { DISPLAY: none; CURSOR

JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法_javascript技巧

多网站的需要填写的文本框在默认状态下都会给出一个默认的提示语言,当鼠标点击此文本框的时候能够将里面的默认文本清除,当删除输入的文本且焦点离开文本框的时候再将默认的文本写入文本框. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/&quo

HTML页面,测试JS对C函数的调用简单实例_javascript技巧

这里记一下,以后要用的时候可以查! <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual Studio"> <meta http-equiv="content-type" content="text/html;charset=gbk"> <TITLE>HTML页面,测试JS对C函数的调用</

js文本框输入内容智能提示效果_javascript技巧

本文实例讲述了js文本框输入内容智能提示效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 大体思路: 1.监听文本框事件.这里是用的keyup事件.大家可以尝试用onchange事件.不过感觉keyup事件的效果要好一点. 2.根据输入内容通过ajax异步的方式去访问后台数据. 3.遍历返回数据将数据添加到显示区域. 4.在添加数据的同时给每一条数据加上一些效果,点击其中一条将数据填到文本框,并且提示内容消失. 5.后台数据应该拼接成json格式. 具体代码如下: <!DOCTYP

JS下拉框内容左右移动效果的具体实现

这篇文章介绍了JS下拉框内容左右移动效果的具体实现方法,有需要的朋友可以参考一下复制代码代码如下: <HTML> <HEAD> <TITLE>选择下拉菜单</TITLE> <META NAME="Description" CONTENT="Power by hill"> <meta http-equiv="Content-Type" content="text/h

js加载读取内容及显示与隐藏div示例

这篇文章主要介绍了js加载读取内容及显示与隐藏div的方法,需要的朋友可以参考下代码如下: <head> <script> function check(){ var num = document.getElementById("choose").value; alert(num); if(num=="4"){ document.getElementById("show").style.display

测试-js如何把html内容,id=0到id=9 从小到大排序显示！谢谢~急

问题描述

解决方案

相关文章

热门推荐

热门标签

社区推荐

看了此文的人还看了

热门活动更多>

热点导航

测试-js如何把html内容,id=0到id=9 从小到大排序显示！谢谢~急的相关文章

ajax.js里面有内容显示效果，根据ID

JS判断文本框内容改变事件的简单实例

js实现目录链接,内容跟着目录滚动显示的简单实例_javascript技巧

js实现将选中内容分享到新浪或腾讯微博_javascript技巧

JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法_javascript技巧

HTML页面,测试JS对C函数的调用简单实例_javascript技巧

js文本框输入内容智能提示效果_javascript技巧

JS下拉框内容左右移动效果的具体实现

js加载读取内容及显示与隐藏div示例

测试-js如何把html内容,id=0到id=9 从小到大排序 显示！谢谢~~~急~~

问题描述

解决方案

相关文章

热门推荐

热门标签

社区推荐

看了此文的人还看了

热门活动更多>

热点导航

测试-js如何把html内容,id=0到id=9 从小到大排序 显示！谢谢~~~急~~的相关文章

测试-js如何把html内容,id=0到id=9 从小到大排序显示！谢谢~急

测试-js如何把html内容,id=0到id=9 从小到大排序显示！谢谢~急的相关文章