功能：

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

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. Python3 Tkinter-Label

    1.创建 from tkinter import * root=Tk() root.title('Hello tkinter!') root.mainloop() 2.使用内置位图 from tkin ...

  2. axis2调用webService几种方式

    主要有三种方式: 第一RPC方式,不生成客户端代码 第二,document方式,不生成客户端代码 第三,用wsdl2java工具,生成客户端方式调用 java代码: package samples.q ...

  3. Reversing Encryption（模拟水题）

    A string ss of length nn can be encrypted(加密) by the following algorithm: iterate(迭代) over all divis ...

  4. wwnjld团队第二轮迭代成员分数

    2014-01-05 第二轮迭代团队内成员分数如下(依据分数分配规则以及团队会议协商所得结果): 吴渊渊 23 汪仁贵 21.5 高小洲 19.5 聂建 22.5 吕家辉 23.5 程志 10

  5. 20145214《Java程序设计》课程总结

    20145214<Java程序设计>课程总结 每周读书笔记链接汇总 第一周读书笔记 第二周读书笔记 第三周读书笔记 第四周读书笔记 第五周读书笔记 第六周读书笔记 第七周读书笔记 第八周读 ...

  6. JavaScript初探系列之日期对象

    时间对象是一个我们经常要用到的对象,无论是做时间输出.时间判断等操作时都与这个对象离不开.它是一个内置对象——而不是其它对象的属性,允许用户执行各种使用日期和时间的过程. 一   Date 日期对象 ...

  7. lintcode-181-将整数A转换为B

    181-将整数A转换为B 如果要将整数A转换为B,需要改变多少个bit位? 注意事项 Both n and m are 32-bit integers. 样例 如把31转换为14,需要改变2个bit位 ...

  8. LintCode-380.两个链表的交叉

    两个链表的交叉 请写一个程序,找到两个单链表最开始的交叉节点. 注意事项 如果两个链表没有交叉,返回null. 在返回结果后,两个链表仍须保持原有的结构. 可假定整个链表结构中没有循环. 样例 下列两 ...

  9. OSG学习：基本几何体绘制示例

    绘制并渲染几何体主要有如下3大步骤: 1.创建各种向量数据,如顶点.纹理坐标.颜色和法线等.需要注意的是,添加顶点数据时主要按照逆时针顺序添加, 以确保背面剔除的正确. 2.实例化一个几何体对象(os ...

  10. 内存交换空间（swap）的构建

    一.使用物理分区构建swap 1.先进行分区的行为. [root@iZ255cppmtxZ ~]# fdisk /dev/xvdb Welcome to fdisk (util-linux ). Ch ...