.each()循环遍历子元素，对比已有元素，避免重复

dinfer 发布于2019-08-02 10:32 / 2769人阅读

摘要：以前写循环遍历习惯性用，但是这次突然觉着无从下手了。规定为每个匹配元素规定运行的函数。该字符串可以是直接包含在元素中的文本，或者被包含于子元素中。

以前写循环遍历习惯性用 for(){}，但是这次突然觉着无从下手了。
场景一：左侧九宫格菜单（显示栏），需要遍历获取每个菜单的id，然后放到数组里。

下面是要遍历的HTML代码：
    
        
            
                 
                 科室信息
                 
            
            
                 
                 健康知识
                 
            
         
    
用for循环的时候，得不到想要的效果
for (var i = 0; i < $("#menuGrid .circlew div").length; i++) {
        if ($(this).attr("id") != undefined) {//id为undefined时，substr报错
            console.log("ceshi:" + $(this).attr("id").substr(4));
        }
   }

每个id都输出了8次，这个地方我就不知道要怎么样用for循环将这些div进行遍历了，真的是基础不牢固吧，请大家指教一下。
下面是我用each()的实现方法。
$(selector).each(function(index,element))：规定为每个匹配元素规定运行的函数。
    $("#menuGrid .circlew div").each(function () {
        console.log($(this).attr("id"));
    })
场景二：点击左侧的加号，出现右侧编辑栏里没有选中的选项，左边移除不想要的选项到了右边，再点击加号，就需要遍历右边已有的所有元素，对比已有的元素，重复的不添加（因为这里做的是点击加号就需要加载一次一开始没有选中的选项）
$("#showMenu .addmenu div").each(function () {
    var RemoveText = $(this).text().trim();//对比的是div的文本内容
    console.log(RemoveText);
    $("#showMenu .addmenu div:contains(" + RemoveText + ")").remove();
})
//这里也涉及到一个我以前没接触过的知识点  :contains 选择器选取包含指定字符串的元素。
//该字符串可以是直接包含在元素中的文本，或者被包含于子元素中。
//$(":contains(text)")

经常与其他元素/选择器一起使用，来选择指定的组中包含指定文本的元素
最终效果图：

GPU云服务器云服务器子元素个数子元素节点数组重复元素添加子元素html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52424.html

.each()循环遍历子元素，对比已有元素，避免重复

摘要：以前写循环遍历习惯性用，但是这次突然觉着无从下手了。规定为每个匹配元素规定运行的函数。该字符串可以是直接包含在元素中的文本，或者被包含于子元素中。以前写循环遍历习惯性用 for(){}，但是这次突然觉着无从下手了。场景一：左侧九宫格菜单（显示栏），需要遍历获取每个菜单的id，然后放到数组里。下面是要遍历的HTML代码： ...

浠ラ箍 2019-08-22 17:31 评论0 收藏0
读 zepto 源码之工具函数

摘要：在遍历的时候，还对回调函数的返回值进行判断，如果回调函数返回，立即中断遍历。可以遍历数组类数组或对象中的元素，根据回调函数的返回值，将返回值组成一个新的数组，并将该数组扁平化后返回，会将及排除。 Zepto 提供了丰富的工具函数，下面来一一解读。源码版本本文阅读的源码为 zepto1.2.0 $.extend $.extend 方法可以用来扩展目标对象的属性。目标对象的同名属性会被...

姘搁『 2019-08-20 16:10 评论0 收藏0
Java面试题

摘要：近段时间在准备实习的面试，在网上看到一份面试题，就慢慢试着做，争取每天积累一点点。现在每天给自己在面试题编写的任务是题，有时候忙起来可能就没有时间写了，但是争取日更，即使当天没更也会在之后的更新补上。近段时间在准备实习的面试，在网上看到一份面试题，就慢慢试着做，争取每天积累一点点。暂时手头上的面试题只有一份，题量还是挺大的，有208题，所以可能讲的不是很详细，只是我自...

OnlyMyRailgun 2019-08-16 17:08 评论0 收藏0
JS中可能用得到的全部的排序算法

本篇有7k+字, 系统梳理了js中常见的12种排序算法。除了基本排序算法，文章还包含了希尔排序、堆排序、桶排序等较为复杂的排序实现，如果喜欢请点赞支持~谢谢. 原文: http://louiszhai.github.io/20... 导读排序算法可以称得上是我的盲点, 曾几何时当我知道Chrome的Array.prototype.sort使用了快速排序时, 我的内心是奔溃的(啥是快排, 我只知道...

verano 2019-08-20 15:08 评论0 收藏0
jquery最佳实践笔记

摘要：对比内部使用引擎，处理各种选择器。引擎的选择顺序是从右到左，所以这条语句是先选，然后再一个个过滤出父元素，这导致它比最快的形式大约慢。这条语句与上一条是同样的情况。使用最新版本因为新版本会改进性能，还有很多新功能用对选择器最快的选择器：id选择器和元素标签选择器原因：遇到这些选择器的时候，jQuery内部会自动调用浏览器的原生方法（比如getElementById()），所以...

leanxi 2019-08-21 10:56 评论0 收藏0