• 网站首页
• 网站案例
• 小程序开发
• 网站推广
• 网站费用
• APP开发
• 关于我们
• 联系我们

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

查看费用明细

	
		
		
		

		
	

	
		div (父节点)
			
ul (指定元素)
				
li (子节点1)
					span (孙节点1)
				
				
li (子节点2)
					span (孙节点2)
				
				
li (子节点3)
					span (孙节点3)
				
			
		

	
		
	

	
		
Hello
		Hello Again

		
And Again

		

	

	
		
	

	
		

			
list item 1
			
list item 2
			list item 3
			
list item 4
			
list item 5
		

		

	

	
		
	

	

		

			
list item 1
			
list item 2
			list item 3
			
list item 4
			
list item 5
		

		

	

	
		
		
		
	
	

		
			
ul (父节点)
				
li (兄弟节点)
				
li (兄弟节点)
				li (类名为"start"的兄弟节点)
				
li (类名为"start"的li节点的下一个兄弟节点)
				
li (类名为"start"的li节点的下一个兄弟节点)
				
li (类名为"start"的li节点的下一个兄弟节点)
				li (类名为"stop"的兄弟节点)
			
		

	
		
		
		
	
	

		
			
ul (父节点)
				
li (兄弟节点)
				
li (类名为"start"的li节点的上一个兄弟节点)
				li (类名为"start"的li节点)
				
li (兄弟节点)
				
li (兄弟节点)
			
		

prevAll()方法

	
		
		
		
	
	

		
			
ul (parent)
				
li (类名为"start"的li的上一个兄弟节点)
				
li (类名为"start"的li的上一个兄弟节点)
				
li (类名为"start"的li的上一个兄弟节点)
				li (类名为"start"的li节点)
				
li (兄弟节点)
				
li (兄弟节点)
			
		
		
在这个例子中,我们返回类名称为“star”的li元素之前的所有兄弟元素。

	

prevUntil()方法

	
		
		
		
	
	

		
			
ul (父节点)
				li (类名为"stop"的兄弟节点)
				
li (类名为"start"的li节点的上一个兄弟节点)
				
li (类名为"start"的li节点的上一个兄弟节点)
				
li (类名为"start"的li节点的上一个兄弟节点)
				li (类名为"start"的li节点)
				
li (兄弟节点)
				
li (兄弟节点)
			
		
		
在这个例子中,我们返回在类名为“star”和“stop”的li元素之间的所有上一个兄弟元素,。

	

each()和map()方法可以遍历数组

each()遍历数组

map()遍历数组

扩展知识：each的用法

1.数组中的each

复制代码

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

2.遍历Dom元素中

$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(){
      alert($(this).text())
    });
  });
});



输出每个列表项的值

Coffee
Milk
Soda

依次弹出Coffee，Milk，Soda

3.each和map的比较

下面的例子是获取每一个多框的ID值；

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);
})

当有需一个数组的值的时候，用map方法，很方便。

4.jquery中使用each

例遍数组，同时使用元素索引和内容。（i是索引，n是内容）

代码如下:

$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});

例遍对象，同时使用成员名称和变量内容。（i是成员名称，n是变量内容）

代码如下:

$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});

例遍dom元素，此处以一个input表单元素作为例子。

如果你dom中有一段这样的代码

然后你使用each如下

代码如下:

$.each($("input:hidden"), function(i,val){
alert(val); //输出[object HTMLInputElement]，因为它是一个表单元素。
alert(i); //输出索引为0，1，2，3
alert(val.name); //输出name的值
alert(val.value); //输出value的值
});

5.each中根据this查找元素

实现效果”回复”两个字只有在鼠标经过的时候才显示出来

    
        
          
嗨，第一层评论
          
            回复
          
        
        
          
            
            
第二层评论
            
              回复
            
          
        
    

js代码如下

$("div.reply").hover(function(){
  $(this).find(".comment-reply-link").show();
},function(){
  $(this).find(".comment-reply-link").hide();
});

实现效果，验证判断题是否都有选择

html

    
            
                1.  阿斯顿按时请选择
                
                

                    
                            
                                A         .阿萨德发
                                
                        
                            
                                B         .阿萨德发
                                
                        
                            
                                C         .阿斯顿
                                
                        
                
                
                
            
        

js代码

//验证单选题是否选中
        $("ul#ulSingle>li.liStyle").each(function (index) {
            //选项个数
            var count = $(this).find("ul>li>:checkbox").length;
            var selectedCount = 0
            for (var i = 0; i < count; i++) {
                if ($(this).find("ul>li>:checkbox:eq(" + i + ")").attr("checked")) {
                    selectedCount++;
                    break;
                }
            }
            if (selectedCount == 0) {
                $(this).find("label#selectTips").show();
                return false;
            }
            else {
                $(this).find("label#selectTips").hide();
            }
        })

ps:传说中attr("property", "value");在部分浏览器中不管用可以用prop，如果只是判断可以用$(this).find("ul>li>:checkbox:eq(" + i + ")").is(":checked");

6.官方解释
以下是官方的解释：

jQuery.each(object, [callback])

概述

通用例遍方法，可用于例遍对象和数组。

不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

参数

• objectObject ：需要例遍的对象或数组。

• callback (可选)Function ：每个成员/元素执行的回调函数。

关于“jquery遍历方法怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。

• 建站热线：13518219792
• 
  微信扫一扫在线咨询
• QQ客服：
• 案 例
• 价 格