1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script type="text/javascript">
  7.         //枚举算法--》穷举算法
  8.         window.onload=function  () {
  9.             var aA=document.getElementsByTagName('a');//get A
  10.             var oUl=document.getElementById('uli');//get ul
  11.             var aLi=document.getElementsByTagName('li');//get li
  12.  
  13.             for (var i = 0; i < aA.length; i++) {//给A加入点击事件
  14.                 aA[i].onclick=function  () {//给每一个里加入点击事件
  15.                     if(mj(this.innerHTML)){//没有同样的
  16.                         var oLi=document.createElement('li');
  17.                         oLi.innerHTML=this.innerHTML;
  18.                         if(aLi[0]){
  19.                             oUl.appendChild(oLi);//第一次显
  20.                         }else{
  21.                             oUl.insertBefore(oLi, aLi[0])//仅仅要点击即显示在最前面
  22.                         }
  23.  
  24.                     }else{//有同样的。不再显示
  25.                         mj2(this.innerHTML);
  26.                     }
  27.                 };
  28.             };
  29.             function mj (text) {//推断是否存在相通的Li
  30.                 var result=true;
  31.                 for (var i = 0; i < aLi.length; i++) {
  32.                     if(aLi[i].innerHTML==text){
  33.                         result=false;
  34.                     }
  35.                 };
  36.  
  37.                 return result;
  38.             }
  39.  
  40.             function mj2 (text) {//存在同样的li时。将当前的Li加入在第一个位置！
  41.                 for (var i = 0; i < aLi.length; i++) {
  42.                     if(aLi[i].innerHTML==text){
  43.                         oUl.insertBefore(aLi[i], aLi[0])
  44.                     }
  45.                 };
  46.  
  47.             }
  48.         }
  49.     </script>
  50. </head>
  51. <body>
  52.     <a href="javascript:;">北京</a>
  53.     <a href="javascript:;">上海</a>
  54.     <a href="javascript:;">杭州</a>
  55.     <a href="javascript:;">天津</a>
  56.     <a href="javascript:;">武汉</a>
  57.     <a href="javascript:;">长沙</a>
  58.     <a href="javascript:;">广州</a>
  59.     <a href="javascript:;">神州</a>
  60.  
  61.     <ul id="uli">
  62.     </ul>
  63.  
  64. </body>
  65. </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. dwz 取不到 form中的值

    在使用dwz的时候,出现的一个问题, <li style=" width:160px;"> <label style=" width:60px;&quo ...

  2. JS移动li行数据，点击上移下移（是位置的互换，不是top的偏移量改变）

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

  3. ios的一些经验记录2

    1.UITextField 的事件用 valuechanged outlet连接 2.swift 中 struct 和class的self 3.Int 和UInt 4.Gesture 的target ...

  4. jQuery （一）选择器

    上一章开始了jQuery的安装,这一张需要开始学习选择器了,不然不进行选择,就无法使用jQuery提供的库的功能不是. 常用的,就列举这么多吧 <!DOCTYPE html> <ht ...

  5. hdu4366 Successor

    好题.   可是感觉题目描写叙述不是非常清楚 这题仅仅是询问开除某人后,他的下属中谁会替代他的位置.不会更新这个位置 要求一个子树中忠诚度最高的人. 能够想到dfs树.保留时间戳.每一个节点便表示一个 ...

  6. window 服务(一)

    windows服务应用程序是一种长期运行在操作系统后台的程序,它对于服务器环境特别适合,它没有用户界面,不会产生任何可视输出,任何用户输出都回被写进windows事件日志.计算机启动时,服务会自动开始 ...

  7. system v进程间通信整理

    key_t键和ftok函数 三种类型的system v IPC使用key_t值作为他们的名字.头文件<sys/types.h> 把key_t这个数据类型定义为一个整数,它通常是一个至少32 ...

  8. 用户数据验证的正确姿势之assert

    用户数据验证灰常重要, 不用多说了, 但是实现方法(准确的说是表现形式)有很多人, 如何优雅的完成一个后端验证过滤器是一个值得考量的问题, 我尝试过许多方法, 比如validator.js模块, ex ...

  9. Wordpress搭建社交型小游戏网站10大步骤

    http://www.aliyun.com/zixun/content/2_8_196141.html ———————————————————————————————————————————————— ...

  10. Comet——随着AJAX技术兴起而产生的新技术

    不得不说Ajax确实是一个好东西,由它的出现使得WEB端新技术不断产生,Comet就属于这么一个技术,这个技术有时叫做反向AJAX,有时叫做服务器"推"技术,嗯,不要被牛逼闪闪的名 ...