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

最新推荐文章于 2024-01-24 12:02:02 发布

原创最新推荐文章于 2024-01-24 12:02:02 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #遍历数组 #each() #合并数组 #merge()

jQuery 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了jQuery中的each()方法，用于数组遍历；merge()方法，用于数组合并；以及unique()方法，用于数组去重。通过具体示例展示了如何在网页中运用这些方法，包括DOM元素的遍历和操作。

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 对象数组的遍历，而$ .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>

在这里插入图片描述