功能：

  • 点击城市列表项，如果内容列表不存在，则插入点击项；
  • 如果内容列表中已存在，则不插入，然后把内容列表中的对应项放到第一位。

HTML代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>枚举算法实现list列表</title>

    <style>

        .tag-list a{ text-decoration: none; display: inline-block; margin: 0 10px; }

        .con-show{ padding: 20px 10px; background-color: #f0f0f0; margin-top: 20px; }

        .con-show p{ margin: 10px; }

    </style>

</head>

<body>

    <div class="tag-list">

        <h3>城市列表：</h3>

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

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

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

        <a href="javascript:;">深圳</a>

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

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

    </div>

    <div class="con-list"></div>

</body>

</html>

JS代码：

var oList = document.querySelector('.tag-list'),

    aItems = oList.getElementsByTagName('a'),

    oConList = document.querySelector('.con-list');

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

    aItems[i].onclick = function() {

        var ownText = this.innerHTML;

        var oP = document.createElement('p');

        // 如果内容列表中已经存在要插入的对象

        if(checkRepeat(ownText)) {

            console.log('内容已经存在喽...');

            // 把内容列表中已存在的内容项前置

            toBefore(ownText);

        }else {

            // 如果不存在，则插入

            oP.innerHTML = ownText;

            oConList.insertBefore(oP, oConList.querySelectorAll('p')[0]);

        }

    }

}

// 枚举内容类别中的内容，检测是否和要插入的相同，如果有相同项，返回true

function checkRepeat(text) {

    oConItem = oConList.querySelectorAll('p');

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

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

            return true;

        }

    }

}

// 如果内容列表中已经存在将要插入的对象，则把内容列表中对应内容前置

function toBefore(text) {

    oConItem = oConList.querySelectorAll('p');

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

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

            oConList.insertBefore(oConItem[i], oConItem[0]);

        }

    }

}

利用枚举算法实现todoList：把对应项添加的内容列表的更多相关文章

  1. 利用Apriori算法对交通路况的研究

    首先简单描述一下Apriori算法:Apriori算法分为频繁项集的产生和规则的产生. Apriori算法频繁项集的产生: 令ck为候选k-项集的集合,而Fk为频繁k-项集的集合. 1.首先通过单遍扫 ...

  2. 机器学习实战（Machine Learning in Action）学习笔记————08.使用FPgrowth算法来高效发现频繁项集

    机器学习实战(Machine Learning in Action)学习笔记————08.使用FPgrowth算法来高效发现频繁项集 关键字:FPgrowth.频繁项集.条件FP树.非监督学习作者:米 ...

  3. 利用神经网络算法的C＃手写数字识别(一)

    利用神经网络算法的C#手写数字识别 转发来自云加社区,用于学习机器学习与神经网络 欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 下载Demo - 2.77 MB (原始地址):handwri ...

  4. 利用CORDIC算法计算三角函数

    这里主要先介绍如何利用CORDIC算法计算固定角度\(\phi\)的\(cos(\phi)\).\(sin(\phi)\)值.参考了这两篇文章[1].[2]. 一般利用MATLAB计算三角函数时,用\ ...

  5. 利用Manacher算法寻找字符串中的最长回文序列（palindrome）

    寻找字符串中的最长回文序列和所有回文序列(正向和反向一样的序列,如aba,abba等)算是挺早以前提出的算法问题了,最近再刷Leetcode算法题的时候遇到了一个(题目),所以就顺便写下. 如果用正反 ...

  6. 机器学习实战 - 读书笔记(12) - 使用FP-growth算法来高效发现频繁项集

    前言 最近在看Peter Harrington写的"机器学习实战",这是我的学习心得,这次是第12章 - 使用FP-growth算法来高效发现频繁项集. 基本概念 FP-growt ...

  7. 在opencv3中实现机器学习算法之：利用最近邻算法（knn)实现手写数字分类

    手写数字digits分类,这可是深度学习算法的入门练习.而且还有专门的手写数字MINIST库.opencv提供了一张手写数字图片给我们,先来看看 这是一张密密麻麻的手写数字图:图片大小为1000*20 ...

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

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

  9. 【机器学习实战】第12章 使用FP-growth算法来高效发现频繁项集

    第12章 使用FP-growth算法来高效发现频繁项集 前言 在 第11章 时我们已经介绍了用 Apriori 算法发现 频繁项集 与 关联规则.本章将继续关注发现 频繁项集 这一任务,并使用 FP- ...

随机推荐

  1. [C++] OOP - Base and Derived Classes

    There is a base class at the root of the hierarchy, from which the other class inherit, directly or ...

  2. maven把项目打包成jar包后找不到velocity模板的bug

    使用springmvc 开发时候要实现发送velcotiy模板邮件,在配置正常后,在本地测试正常后,使用maven打包成jar包后,报以下错误, Caused by: org.apache.veloc ...

  3. Java中抽象类也能实例化

    在Java中抽象类真的不能实例化么? 在学习的过程中,发现了一个问题,抽象类在没有实现所有的抽象方法前是不可以通过new来构建该对象的,但是抽象方法却是可以有自己的构造方法的.这样就把我搞糊涂了,既然 ...

  4. Android开发随笔5

    昨天: 对界面的进一步设计补充 可以在界面之间的跳转 研究了对图标等的操作 今天: 实现对库的相关操作 学习视视频内容‘ 复习java的一些知识.

  5. khan academy js

    Documentation Quick Jump: Shapes, Complex Shapes, Colors, Text, Transforms, Environment, Mouse, Keyb ...

  6. Java常用类之StringBuffer

    StringBuffer 类: 1. java.lang.StringBuffer 代表可变的字符序列: 2. StringBuffer 和 String 类似,但是 StringBuffer 可以对 ...

  7. vue项目怎么运行

    因为要做毕业设计 ,准备用vue来做前端的界面.发现不知如何运行vue的项目,很尴尬.通过查阅网上教程,因此把环境搭建过程记录下来,以备不时之需.   言归正传~~   首先,列出来我们需要的东西:  ...

  8. 使用WCF上传数据

    通过传递Stream对象来传递大数据文件,但是有一些限制: 1.只有 BasicHttpBinding.NetTcpBinding 和 NetNamedPipeBinding 支持传送流数据. 2. ...

  9. 整理下本周工作中遇到的疑问；uid/euid/suid;docker镜像管理

    1.系统中的父子进程关系,以及docker是如何处理的这种父子进程关系,线上问题发现,子进程长时间得不到退出. 2.调用system系统调用发生了啥事情,发现大量的页表拷贝. 3.通过shell命令通 ...

  10. java.awt.AWTError: Can't connect to X11 window server using ':20' as the value of the DISPLAY variable

    1.使用pio在Linux服务器上创建window文件时,需要使用到Linux的图形界面服务,出现以下问题需确认用户权限. 参考文献:https://zhidao.baidu.com/question ...