jq的each遍历

原文出处https://www.cnblogs.com/tylerdonet/archive/2013/04/05/3000618.html

jQuery 遍历函数包括了用于筛选、查找和串联元素的方法

var arr=[1,2,3,4];
$.each(arr,function(){
alert(this)
})//1,2,3,4

var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
   alert(item[0]);
});
//其实arr1为一个二维数组,item相当于取每一个一维数组,
//item[0]相对于取每一个一维数组里的第一个值
//所以上面这个each输出分别为:1   4   7
  
var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(i) {
    alert(obj[i]);
});
//这个each就有更厉害了,能循环每一个属性
//输出结果为:1   2  3  4 

2.遍历DOM元素

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(){
      alert($(this).text())
    });
  });
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>

3.each和map的比较

each方法:

定义一个空数组,通过each方法,往数组添加ID值;最后将数组转换成字符串后,alert这个值;

$(function(){
    var arr = [];
    $(":checkbox").each(function(index){
        arr.push(this.id);
    });
    var str = arr.join(",");
    alert(str);
})

map方法

将每个:checkbox执行return this.id;并将这些返回值,自动的保存为jQuery对象,然后用get方法将其转换成原生Javascript数组,再使用join方法转换成字符串,最后alert这个值;

$(function(){
    var str = $(":checkbox").map(function() {
        return this.id;
    }).get().join();
    alert(str);
})
时间: 2024-11-12 10:38:41

jq的each遍历的相关文章

JQ nextALL() 实现遍历

在我们的 手机端 常常需要 应用到 hide 和 show 的方法 来节省页面的版块 那么我们需要更多的是 需要 show 一个 <li>  hide 剩下的 <li> 那么 我们就需要应用到  nextAll()的方法 先贴代码 <script type="text/javascript"> $(document).ready(function(){ $("#button3").click(function(){ $('.con

浅析ES5 中对数组遍历的5个扩展方法

1. ForEach 功能: 遍历数组中的每一个元素, 并且将每一个元素的处理过程交给回调函数 语法: 数组.forEach( callback ) 回调函数中会传入两个参数, 一个是遍历的数组元素, 一个是当前的索引. 例如: 遍历打印数组中的每一个元素与索引号 传统: for ( var i = 0; i < arr.length; i++ ) { console.log( i + ', ' + arr[ i ] );  // 打印, 索引号 与 当前元素 } forEach: arr.fo

理清Js的各种遍历

JS的遍历 说起遍历,我常用JQ的each遍历DOM集,以及用map遍历Json.然而还有很多遍历方法for,forEach,for in等,有原生的有JQ的,他们有何区别呢? 所以我决定写一写博客梳理我关于遍历的知识. 首先,先分清原生js和jQuery的遍历方法: 1.原生JS遍历方法:for.for in.forEach.for of.map 2.jquery遍历方法:$.each.find 原生JS遍历方法 for 常用于遍历数组 forEach (ES5新增方法)用于遍历数组,遍历过程

jquery常用遍历工具函数

遍历在这里 http://my.oschina.net/u/2352644/blog/508397 废话不多说,一个句话告诉你jq的遍历工具 我们对数组的循环一般是用for或者for in,这是原生js支持,同样既然用jq的了,咱jq也提供了对数组的遍历方法,也就是对原生js循环的封装 一.$.each()和for循环等不得不说的秘密 我们循环一个数组一般是下面的处理,利用for循环  var arr=[0,1,2];  for(var i=0;i<arr.length;i++){   aler

当filter使用函数而非选择器来过滤元素时的一个有趣的地方

JQuery官方API关于filter方法的介绍有这么一个实例: <div id="first"></div> <div id="second"></div> <div id="third"></div> <div id="fourth"></div> <div id="fifth"></div

jQuery关于隐式迭代的个人理解~

1.JQuery对象“ 如: $(‘div’).text("div展示的信息") 可以看成”是一个包含一个dom数组 和 包含所有Jquery方法的容器 2.每当我们调用选择器方法查找dom树里的元素时,其实就是把找到的dom元素存入一个JQ对象里的dom数组中,然后再把这个JQ对象返回. 当我们调用Jquery方法时(如 html()),jq方法会遍历内部 dom数组,并调用每个dom元素的对应的dom属性或方法(如innerHTML),完成操作. 3.其中Jq方法遍历内部dom数组

kissy小记

<script> KISSY.add('demo',function(S ,require, exports, module){ var Node = require('node'); var $ = Node.all; // var html = '<div>我是新节点</div>'; //$('.J_Wrapper').html(html); var $html = $('<div>我是新节点</div>'); $('.J_Wrapper')

JS三教九流系列-jquery实例开发到插件封装3

我们先写实例,然后可能需要在封装为插件,最后做更高级的处理! 封装插件基础学习 http://my.oschina.net/u/2352644/blog/487688 1-7实例地址  http://my.oschina.net/u/2352644/blog/490827 8-17实例地址 http://my.oschina.net/u/2352644/blog/491933 效果目录: 18.计数增加效果 19.模仿3d的焦点图效果 20.倒计时效果 21.导航滚动监听 18.计数增加效果 我

Jquery真的不难

回到占占推荐博客索引 JQ不错,被JS大师们封装的不错,这对于开发者来说是件好事,会让你少写很多代码,呵呵,你可能已经忘记了 document.getElementById,document.getElementByTagName等等恩,写这个系列的目的是帮助“我喜欢 的”年轻人们一起成长,呵呵! 对于javascript类库目前来说有几个比较流行,如jquery,yahooYUI,prototype等等,但今天的主角是jquery,目前比较新的是1.8了,发展的很快呀,呵呵,解决了之前版本的很