功能：

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

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. LeetCode 109——有序链表转化二叉搜索树

    1. 题目 2. 解答 2.1. 方法一 在 LeetCode 108--将有序数组转化为二叉搜索树 中,我们已经实现了将有序数组转化为二叉搜索树.因此,这里,我们可以先遍历一遍链表,将节点的数据存入 ...

  2. Java学习个人备忘录之接口

    abstract class AbsDemo { abstract void show1(); abstract void show2(); } 当一个抽象类中的方法都是抽象的时候,这时可以将该抽象类 ...

  3. oracle数据库中常见的操作语句（一）

    一 创建表空间 create tablespace lfdc_data logging datafile 'D:\Database\lfdc_data.dbf' size 50m autoextend ...

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

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

  5. lintcode-171-乱序字符串

    171-乱序字符串 给出一个字符串数组S,找到其中所有的乱序字符串(Anagram).如果一个字符串是乱序字符串,那么他存在一个字母集合相同,但顺序不同的字符串也在S中. 注意事项 所有的字符串都只包 ...

  6. css滤镜让图片模糊

    .mhblur { filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(53px); /* Ch ...

  7. Python中编码问题：u'\xe6\x97\xa0\xe5\x90\x8d' 类型和 ‘\u559c\u6b22\u4e00\u4e2a\u4eba ’ 转为utf-8的解决办法

    相信小伙伴们遇到过类似这样的问题,python2中各种头疼的转码,类似u'\xe6\x97\xa0\xe5\x90\x8d' 的编码,直接s.decode()是无法解决编码问题.尝试了无数办法,都无法 ...

  8. Delphi DBGridEH中，选中行、列、单元格

    // 新增行后,默认首列 procedure TForm1.ADOQuery1AfterInsert(DataSet: TDataSet);begin  with DBGridEh1 do  begi ...

  9. 【数据库】】MySQL之desc查看表结构的详细信息

    在mysql中如果想要查看表的定义的话:有如下方式可供选择 1.show create table 语句: show create table table_name; 2.desc table_nam ...

  10. codeforces 730 j.bottles

    J. Bottles time limit per test 2 seconds memory limit per test 512 megabytes input standard input ou ...