jQuery--遍历数组each()、合并与过滤数组merge()、unique()

mac2022-06-30  25

each()方法

each()方法用于实现对数组的遍历,其语法格式如下:

$(selector).each(function(index, element)) $.each(object, function(index, element)) $(selector)和object:表示需要遍历的对象或数组function():表示回调函数,用于对数组中的元素进行遍历 ( s e l e c t o r ) . e a c h ( ) 方 法 多 用 于 D O M 对 象 数 组 的 遍 历 , 而 (selector).each()方法多用于DOM对象数组的遍历,而 (selector).each()DOM.each()方法多用于Array数组或JSON对象的遍历

示例:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>each()方法-jQuery</title> <script type="text/javascript" src="js/jquery-1.x.js"> </script> <style type="text/css"> ul{list-style:none;margin:0px;} li{font-size:16px;height:80px;float:left;margin-right:20px;} li img{vertical-align:middle;} hr{clear:both;} </style> </head> <body> <ul id="container"> <li title="icon1.jpg">推荐商品</li> <li title="icon2.jpg">最新商品</li> <li title="icon3.jpg">热门商品</li> <li title="icon4.jpg">商品推广</li> </ul> <hr/> <div id="footer"></div> <script type="text/javascript"> $(function(e){ $("#container li").each(function(index, element) { var title=$(this).attr("title"); $(this).prepend(index+":").append("<img src='icon/"+title+"'/>"); console.log(index+" "+element.innerHTML); $(this).on("click",function(){ alert($(this).html()); }); }); var imageArray=[12,5,13,6,7,4,11,18,20,16]; $.each(imageArray,function(index, element){ if(index%5==0){ $("#footer").append("<br />"); } $("#footer").append("<img src='icon/icon"+(index+1)+".jpg'/>"); console.log("Item #"+index+": "+element); }); }); </script> </body> </html>

merge()方法与unique()方法

merge()方法用于将两个数组进行合并,把第二个数组中的内容合并到第一个数组中并返回,其语法格式如下:

$.merge(firstArray, secondArray)

unique()方法用于根据元素在文档中出现的先后顺序对DOM元素数组进行排序,并移除重复的元素。当对数值或字符串数组进行过滤时,需对数组排序后再进行过滤,否则没有效果。

示例:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>merge()和unique方法-jQuery</title> <script type="text/javascript" src="js/jquery-1.x.js"> </script> </head> <body> <ul id="container"> <li title="icon1.jpg">推荐商品</li> <li title="icon2.jpg">最新商品</li> <li title="icon3.jpg">热门商品</li> <li title="icon4.jpg">商品推广</li> </ul> <script type="text/javascript"> $(function(e){ /* var fristArray=[13,20,18,17]; var secondArray=[35,26,18,80,13];*/ var fristArray=['13','20','18','17']; var secondArray=['35','26','18','80','13']; //1.数组的合并 var target=$.merge(fristArray,secondArray); //向控制台打印合并后的数组 console.log("合并后的数组:"+$.unique(target)); //2.数组排序后,再使用unique()方法 target.sort(); var result=$.unique(target); console.log("筛选后的数组:"+result); //3.获取DOM对象数组 var domArray1=$("#container li:even"); var domArray2=$("#container li:gt(1)"); //合并后进行过滤 var array=$.unique($.merge(domArray1,domArray2)); //处理过滤的结果 var targetArray=new Array(); array.each(function(){ targetArray.push($(this).html()); $(this).css("font-weight","bold"); }); console.log("筛选后的数组:"+targetArray); }); </script> </body> </html>

最新回复(0)