jquery each 遍历

在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法。

$().each 在dom处理上面用的较多。如果页面有多个input标签类型为checkbox,对于这时用$().each来处理多个checkbook,例如:

$(“input[name=’ch’]”).each(function(i){
if($(this).attr(‘checked’)==true)
{
//一些操作代码
}
回调函数是可以传递参数,i就为遍历的索引。

遍历一个数组通常用$.each()来处理  例如:

$.each([{name:"limeng",email:"xfjylimeng"},{name:"hehe",email:"xfjylimeng"}],function(i,n)
{
alert("索引:"+i+"对应值为:"+n.name);
});
参数i为遍历索引值,n为当前的遍历对象.

var arr1 = [ "one", "two", "three", "four", "five" ];
$.each(arr1, function(){
alert(this);
});
输出:one   two  three  four   five

var arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
$.each(arr2, function(i, item){
alert(item[0]);
});
输出:1   4   7

var obj = { one:1, two:2, three:3, four:4, five:5 };
$.each(obj, function(key, val) {
alert(obj[key]);
});
输出:1   2  3  4  5

其实jQuery里的each方法是通过js里的call方法来实现的。

下面简单介绍一下call方法。
call这个方法很奇妙,其实官方的说明是:“调用一个对象的一个方法,以另一个对象替换当前对象。”网上更多的解释是变换上下文环境,也有说是改变上下文this指针。
call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2,  , argN
可选项。将被传递方法参数序列。

说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

引用网上有一个很经典的例子

Js代码

function add(a,b){
alert(a+b);}

function sub(a,b){
alert(a-b);}

add.call(sub,3,1);

用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4);
注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。

下面提一下jQuery的each方法的几种常用的用法

Js代码
var arr = [ “one”, “two”, “three”, “four”];
$.each(arr, function(){
alert(this);
});
//上面这个each输出的结果分别为:one,two,three,four

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(key, val) {
alert(obj[key]);
});
//这个each就有更厉害了,能循环每一个属性
//输出结果为:1   2  3  4

jQuery each源码

each: function( obj, callback ) {
        var length, i = 0;

        if ( isArrayLike( obj ) ) {
            length = obj.length;
            for ( ; i < length; i++ ) {
                if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                    break;
                }
            }
        } else {
            for ( i in obj ) {
                if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                    break;
                }
            }
        }

        return obj;
    }
时间: 2024-10-25 22:08:00

jquery each 遍历的相关文章

Jquery节点遍历

jquery 节点遍历 <html> <head> <title></title> <script src="Jquery/jquery-1.10.2.min.js" type="text/javascript"></script> </head> <body> <div>AA</div> <div>BB</div> <

jquery:树遍历

.children() 获得元素集合中每个匹配元素的子元素,选择器选择性筛选. <!DOCTYPE html> <html> <head> <style> body { font-size:16px; font-weight:bolder; } p { margin:5px 0; } </style> <script src="http://code.jquery.com/jquery-latest.js"><

JQuery+javascript遍历tr td

function InitTable(tableID, trName) { $(tableID + " tr").each(function (index, element) { if (index == 0 || index == $(tableID + " tr").length - 1) { return true; } var s = element.cells[0].innerHTML; if ($.trim(s) != '') { if (s.index

jquery学习——遍历

1.each() $(selector).each(function(index,element)) var arr = [ "a", "bb", "ccc" ]; $.each(arr,function(i,a){ console.log(i+":"+a); }); //直接对jquery对象遍历 $(arr).each(function(i,a){ console.log(i+":"+a); }); 其

JQuery $.each遍历JSON字符串报Uncaught TypeError:Cannot use &#39;in&#39; operator to search for

查看一个简单的jQuery的例子来遍历一个JavaScript数组对象. [js] view plaincopy var json = [ {"id":"1","tagName":"apple"}, {"id":"2","tagName":"orange"}, {"id":"3","tagName&

JQuery的遍历

1.JQuery的遍历 1.什么叫遍历 遍历即为"移动",具体的意思是从某一位置开始,到达另一个位置 2.遍历--祖先 1.祖先是父,祖父这些.通过DOM,你可以向上遍历. 2.向上遍历的方法: parent() parents() parentUntil() 3.parent()实例 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <

jquery $.each遍历json数组方法

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head>  <meta http-equiv="content-

jquery json遍历和动态绑定事件

<div id='tmpselectorList' style='border: 1px solid grey;max-height: 150px;position:absolute;text-align: left; overflow: auto;background:white;width:153px;'> </div> <script type="text/javascript"> $(document).ready(function () {

jquery里遍历普通数组和多维数组的方法及实例

jquery里遍历数组用的是$.each,下面站长给大家几个具体的实例: 实例1.遍历一个普通的一维数组: 1 2 3 4 5 6 7 8 <script> //声明数据有下面两种方式 //var aijquery=new Array("a","b","c","d"); var aijquery=["a","b","c","d"]; $

jQuery使用(十一):jQuery实例遍历与索引

each() children() index() 一.jQuery实例遍历方法each() jQuery实例上的each()方法规定要运行的函数,并且给函数传入两个参数:index,element.这个方法本身应用非常的简单,所以要来点不简单的东西,请看以下代码: <ul> <li></li> <li></li> <li></li> </ul> //js //需求一是将每个li的索引值作为文本添加给对应的li