<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        //枚举算法--》穷举算法

        window.onload=function  () {

            var aA=document.getElementsByTagName('a');//get A

            var oUl=document.getElementById('uli');//get ul

            var aLi=document.getElementsByTagName('li');//get li

            for (var i = 0; i < aA.length; i++) {//给A加入点击事件

                aA[i].onclick=function  () {//给每一个里加入点击事件

                    if(mj(this.innerHTML)){//没有同样的

                        var oLi=document.createElement('li');

                        oLi.innerHTML=this.innerHTML;

                        if(aLi[0]){

                            oUl.appendChild(oLi);//第一次显

                        }else{

                            oUl.insertBefore(oLi, aLi[0])//仅仅要点击即显示在最前面

                        }

                    }else{//有同样的。不再显示

                        mj2(this.innerHTML);

                    }

                };

            };

            function mj (text) {//推断是否存在相通的Li

                var result=true;

                for (var i = 0; i < aLi.length; i++) {

                    if(aLi[i].innerHTML==text){

                        result=false;

                    }

                };

                return result;

            }

            function mj2 (text) {//存在同样的li时。将当前的Li加入在第一个位置！

                for (var i = 0; i < aLi.length; i++) {

                    if(aLi[i].innerHTML==text){

                        oUl.insertBefore(aLi[i], aLi[0])

                    }

                };

            }

        }

    </script>

</head>

<body>

    <a href="javascript:;">北京</a>

    <a href="javascript:;">上海</a>

    <a href="javascript:;">杭州</a>

    <a href="javascript:;">天津</a>

    <a href="javascript:;">武汉</a>

    <a href="javascript:;">长沙</a>

    <a href="javascript:;">广州</a>

    <a href="javascript:;">神州</a>

    <ul id="uli">

    </ul>

</body>

</html>

1、点击当中一个。显示在最前面！

2、当点击第二次的时候。不再显示！！

javascript--枚举算法实现的更多相关文章

  1. 利用枚举算法实现todoList：把对应项添加的内容列表

    功能: 点击城市列表项,如果内容列表不存在,则插入点击项: 如果内容列表中已存在,则不插入,然后把内容列表中的对应项放到第一位. HTML代码: <!DOCTYPE html> <h ...

  2. RX学习笔记：FreeCodeCamp的JavaScript基本算法挑战

    FreeCodeCamp的JavaScript基本算法挑战 https://www.freecodecamp.com 2016-07-03 JavaScript还不是非常熟悉,用已经会的知识来解这些题 ...

  3. 枚举算法总结 coming~^.*

    感谢CJ同学监督╭(╯^╰)╮.从放假到现在都木有更新博客了~噶呜~小娘谨记教诲,每天会更新博客==!! 看了一下POJ训练计划,虽然已经零零散散做了40多道题了,还是从头开始整理一下漏掉的知识点.T ...

  4. 【枚举Day1】20170529-2枚举算法专题练习 题目

    20170529-2枚举算法专题练习 题解: http://www.cnblogs.com/ljc20020730/p/6918360.html 青岛二中日期 序号 题目名称 输入文件名 输出文件名 ...

  5. FCC的javascript初级算法题解答

    FCC上的javascript基础算法题 前一阵子做的基础算法题,感觉做完后收获还蛮大的,现在将自己的做法总结出来,供大家参考讨论.基本上做到尽量简短有效,但有些算法还可以继续简化,比如第七题若采用正 ...

  6. javascript 冒泡排序算法

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  7. C++枚举算法

    枚举算法 什么是枚举? 枚举,顾名思义,就是用最笨的方法,去解决问题(暴力枚举),一个集的枚举是列出某些有穷序列集的所有成员的程序,或者是一种特定类型对象的计数.这两种类型经常(但不总是)重叠. 枚举 ...

  8. JavaScript 排序算法——快速排序

    常见排序 javaScript 实现的常见排序算法有:冒泡排序.选择排序.插入排序.谢尔排序.快速排序(递归).快速排序(堆栈).归并排序.堆排序. 过程 "快速排序"的思想很简单 ...

  9. JavaScript 排序算法（JavaScript sorting algorithms）

    JavaScrip 排序算法(JavaScript Sorting Algorithms) 基础构造函数 以下几种排序算法做为方法放在构造函数里. function ArrayList () { va ...

  10. JavaScript 排序算法

    排序也是在程序中经常用到的算法.无论使用冒泡排序还是快速排序,排序的核心是比较两个元素的大小.如果是数字,我们可以直接比较,但如果是字符串或者两个对象呢?直接比较数学上的大小是没有意义的,因此,比较的 ...

随机推荐

  1. Oracle PLSQL Demo - 18.01管道function[查询零散的字段组成list管道返回]

    --PACKAGE CREATE OR REPLACE PACKAGE test_141213 is TYPE type_ref IS record( ENAME ), WORK_CITY ), SA ...

  2. 一个div层在页面上下左右居中以及数据的排序

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. openldap 备份与导入 及相关问题

    摘要: 对openldap进行备份时,直接使用slapcat命令进行备份,使用ldapadd还原出现问题及解决. 介绍: 对openldap进行备份时,直接使用slapcat命令进行备份(如代码一), ...

  4. 一款纯css3实现的响应式导航

    之前为大家介绍了好几款响应式导航.今天再给大家带来一款纯css3实现的响应式导航.这款导航还有个响应式的搜索框.废话少说,直接上图: 在线预览   源码下载 实现的代码. html代码: <di ...

  5. 一款基于javascript的3D玻璃破碎特效

    之前为大家介绍了一款 html5 canvas实现图片玻璃碎片特效.今天要给大家带来一款基于javascript的3D玻璃破碎特效.效果图如下: 在线预览   源码下载 html代码: <div ...

  6. cocos2dx遇到的坑2

    记录下在cocos2dx 2.x时代遇到的问题 1.cocos2dx   retain 在onenter时,在onexit时 release 2.先结束定时器再退出界面 3.在不同帧里数据是有可能不一 ...

  7. ASPxGridView常用总结

    目录:一.客户端常用1.常用API2.聚焦行变更事件3.客户端选择多行4.客户端选择行5. 获取选择的行数目6.单击行时,选中行7.通过checkbox 选择行8.选择所有行9.启动编辑框,Conta ...

  8. Hadoop的集群和优化

    Hadoop的集群和优化 Hadoop集群规模小到几个节点就可以组件一个集群,大到由几千个节点组成的超大集群. 在安装Hadoop集群时,把要安装的软件解压到集群内的所有机器上,软件的安装目录也要一致 ...

  9. C语言 · 递归求二进制表示位数

    算法训练 6-2递归求二进制表示位数   时间限制:10.0s   内存限制:256.0MB      问题描述 给定一个十进制整数,返回其对应的二进制数的位数.例如,输入十进制数9,其对应的二进制数 ...

  10. SSL/TLS原理详解2

    引用原文地址:https://segmentfault.com/a/1190000004985253#articleHeader6 在进行 HTTP 通信时,信息可能会监听.服务器或客户端身份伪装等安 ...