功能：

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

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. solidity python 签名和验证

    注意,以太坊智能合约里面采用的是公钥非紧凑类型 def gen_secrets_pair(): """ 得到公钥和私钥 :return: ""&quo ...

  2. http://www.yiibai.com/javalang/string_endswith.html

    http://www.yiibai.com/javalang/string_endswith.html

  3. java超强分页标签演示

    最近在做一个项目,用到了一个分页,于是动手写了个分页标签,先将代码贴出来,供大家交流,写的不好,请见谅!. 以下是java标签类,继承自SimpleTagSupport package com.lyn ...

  4. 十 Writing YARN Applications

    本节介绍:     使用yarn 高级提交写yarn应用程序.其实已经yarn底层API.MR计算框架对底层的API实现了封装. 高级提交指直接使用yarn的三种接口来提交应用程序: 1)YarnCl ...

  5. vue.js学习之 打包为生产环境后，页面为白色

    vue.js学习之 打包为生产环境后,页面为白色 一:配置问题 当我们将项目打包为生产环境后,在dist文件夹下打开index.html,会发现页面为白色. 1:打开config>index.j ...

  6. NSValue的valueWithBytes:objCType:方法

    + (NSValue *)valueWithBytes:(const void *)value objCType:(const char *)type; NSValue的valueWithBytes: ...

  7. 自测之Lesson9：时钟与信号

    题目一:编写一个获取当前时间的程序,并将其以“year-mon-day time”的形式输出. 程序代码: #include <stdio.h> #include <time.h&g ...

  8. 阅读 用P4对数据平面进行编程

    引言 关于题目,对数据平面进行编程,在之前读过the road to SDN,软件定义网络的思想在于数控分离,其对网络行为的编程暂时只局限于网络控制平面.其转发平面在很大程度上受制于功能固定的包处理硬 ...

  9. <Effective C++>读书摘要--Inheritance and Object-Oriented Design<一>

    1.Furthermore, I explain what the different features in C++ really mean — what you are really expres ...

  10. 利用SqlServer的作业定时清除过期数据

    有时候我们的数据库中可能会有那么些存放动态数据的表,比如一些每天定时发出的消息通知信息等数据.这些数据我们只需要临时保存,一些老旧的数据需要定时去清除掉,不然时间一长的话单表数据堆积非常严重.导致数据 ...