功能：

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

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. 【转载】android 常用开源框架

    对于Android初学者以及对于我们菜鸟,这些大神们开发的轻量级框架非常有用(更别说开源的了). 下面转载这10个框架的介绍:(按顺序来吧没有什么排名). 一.  Afinal 官方介绍: Afina ...

  2. ARM架构中的程序执行与调用

    ARM架构中的程序执行与调用 1. 几个名词 ABI : 可执行文件必须遵守的规范,以在特定执行环境中运行: 单独产生的可重定址的文件必须遵守的规范,以用来链接和执行. EABI: 适用于嵌入式环境的 ...

  3. “Hello world!”团队第一周贡献分分配结果

    小组名称:Hello World! 项目名称:空天猎 组长:陈建宇 成员:刘成志.阚博文.刘淑霞.黄泽宇.方铭.贾男男 第一周贡献分分配结果   基础分 会议分 提功能分 个人表现分 各项总分 最终分 ...

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

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

  5. 软工1816 · Alpha冲刺（4/10）

    团队信息 队名:爸爸饿了 组长博客:here 作业博客:here 组员情况 组员1(组长):王彬 过去两天完成了哪些任务 完成菜品信息的标定.量化以及整理成csv的任务   接下来的计划 & ...

  6. 在64位的环境下利用Jet来操作Access,Excel和TXT

    For example, you have a 32-bit application that uses the Microsoft OLE DB Provider for Jet. If you m ...

  7. 【Redis】- 总结精讲

    本文围绕以下几点进行阐述 1.为什么使用redis2.使用redis有什么缺点3.单线程的redis为什么这么快4.redis的数据类型,以及每种数据类型的使用场景5.redis的过期策略以及内存淘汰 ...

  8. c++ int 负数 补码 隐式类型转换

    unsigned y = ; ; cout << x + y << endl; 对于上述的结果为 这里面有一个负数的补码问题和不同类型之间的隐式类型转换问题 首先负数的表示方法 ...

  9. [剑指Offer] 59.按之字形顺序打印二叉树

    题目描述 请实现一个函数按照之字形打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右至左的顺序打印,第三行按照从左到右的顺序打印,其他行以此类推. [思路]先按层次遍历存入,通过设立标志位,将 ...

  10. IBatis Map时间参数文字格式不匹配！

    CS. ht.Add("start_time", startTime); Map <isNotNull prepend="and" property=&q ...