对li标签的相关操作——八种方式遍历li标签并获取其值

    $("ul>li").forEach(function(item,index){
alert(index+":"+ item.innerHTML);
});
        $("ul>li").each(function(index,item){
alert(index+":"+ item.innerHTML);
});
$("ul>li").each(function(index){
alert(index+":"+$(this).html());
});
    $('ul>li').filter(function(index){
alert(index+":"+$(this).html());
})
$('ul>li').map(function(index,item){
alert(index+":"+ item.innerHTML);
});
$("ul>li").map(function(index){
alert(index+":"+$(this).html());
});
$.grep($("ul>li").get(), function(item,index){
alert(index + ":" + item.innerHTML);
});
        $.grep($("ul>li").get(), function(item){
alert(item.innerHTML);
});

注:filter没有两个参数的,forEach没有一个参数的

  其中一个重要的区别是,each返回的是原来的数组,并不会新创建一个数组。而map方法会返回一个新的数组。

      如果在没有必要的情况下使用map,则有可能造成内存浪费。

使用each时,改变的还是原来的items数组,而使用map时,不改变items,只是新建一个新的数组。

前端学习笔记(zepto或jquery)——对li标签的相关操作(三)的更多相关文章

  1. 前端学习笔记(zepto或jquery)——对li标签的相关操作(二)

    对li标签的相关操作——8种方式获取li标签的第一个元素的内容 1.alert($("ul>li").first().html());2.alert($('ul>li' ...

  2. 前端学习笔记(zepto或jquery)——对li标签的相关操作(五)

    对li标签的相关操作——has与find的差异性 demo代码: <ul> <li><p>1</p></li> <li>2< ...

  3. 前端学习笔记(zepto或jquery)——对li标签的相关操作(四)

    对li标签的相关操作——五种方式给奇数项li标签设置样式 demo演示: 1 2 3 4 5 6 7 // 详解: 通常我们为多个li添加样式时常用的是使用filter,但我们在第三节中可以看到fil ...

  4. 前端学习笔记(zepto或jquery)——对li标签的相关操作(一)

    对li标签的相关操作——点击li标签进行样式切换的两种方式 Demo演示: 1 2 3 4 // 详解: 第一种方式(以ul为基础): $("ul").bind("cli ...

  5. 前端学习笔记之HTML body内常用标签

    阅读目录 一 HTML语义化 二 字符实体 三 h系列标签 四 p标签 五 img标签 六 a标签 七 列表标签 八 table标签 九 form标签 一 HTML语义化 body中的标签是会显示到浏 ...

  6. .net学习笔记----利用System.Drawing.Image类进行图片相关操作

    C#中对图片的操作主要是通过System.Drawing.Image等类进行. 一.将图片转换为字节流 /// <summary> /// 图片处理帮助类 /// </summary ...

  7. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  8. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  9. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

随机推荐

  1. 【干货】免费获得WebStorm软件

    内容提要: 1.WebStorm简介 2.如何免费获得WebStorm 3.利用学生身份免费获得正式版WebStorm WebStorm简介 WebStorm 是一款前端开发 IDE(集成开发环境), ...

  2. 最新jhost免费jsp云空间会员邀请码

    jhost支持jsp.php的免费云空间,邀请码用于激活空间服务: 邀请码:20141003104317_149661                  有效期:2014-10-03 http://w ...

  3. Chapter 1 Securing Your Server and Network(4):使用虚拟服务帐号

    原文:Chapter 1 Securing Your Server and Network(4):使用虚拟服务帐号 原文出处:http://blog.csdn.net/dba_huangzj/arti ...

  4. [原创].NET 分布式架构开发实战五 Framework改进篇

    原文:[原创].NET 分布式架构开发实战五 Framework改进篇 .NET 分布式架构开发实战五 Framework改进篇 前言:本来打算这篇文章来写DAL的重构的,现在计划有点改变.之前的文章 ...

  5. 从XML文件乱码问题,探寻其背后的原理(转)

    由于网友反应本文图片不能显示,由于时间关系未能及时修正.请访问原文地址: 本文出自http://blog.csdn.net/dinglang_2009/article/details/6895355, ...

  6. hdu 4691 最长的共同前缀 后缀数组 +lcp+rmq

    http://acm.hdu.edu.cn/showproblem.php? pid=4691 去年夏天,更多的学校的种族称号.当时,没有后缀数组 今天将是,事实上,自己的后缀阵列组合rmq或到,但是 ...

  7. Base64编码 概念和用途

    Base64概念 什么是Base64? 依照RFC2045的定义,Base64被定义为:Base64内容传送编码被设计用来把随意序列的8位字节描写叙述为一种不易被人直接识别的形式.(The Base6 ...

  8. thinkphp3.2 代码生成并点击验证码

    本人小菜鸟一仅仅.为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,server)等一系列的知识.小菜鸟创建了一个群.希望光临本博客的人能够进来交流.寻求 ...

  9. C——联合体(共同体)总结

    联合体的特点 1.联合体是一种结构,在这个结构中能够不同类型的成员,但同一时间仅仅能存放当中的一种. #include <stdio.h> union Demo { int a; char ...

  10. 全自动Web后门扫描(转)

    阅读目录 工具介绍 使用方法 工具介绍 这是一款全自动Web后门查杀工具,基于Python开发 某些较新的后门可能会查杀失败 规则列表来自seay博客 回到顶部 使用方法 1.按恶意代码查杀: pyt ...