jquery 循环li元素_jquery中each遍历各种标签方法

这写天用到的遍历jquery each方法比较频繁 刚好有时间，就在这里记录一下

jquery用的是bootstrap的线上文件 不需要导入

function eachInput(){

/*遍历方法指定的属性不一定多种方式的  甚至可以自己定义标签没有的属性

(如 给上面的input 加一个 test="first"    $("#DIV1 input[test=first]").each(function(){  })  )

也是可以遍历的只要一直就可以 */

// $("#DIV1 input[class=class1]").each(function(){

//$("#DIV1 input[id=id1]").each(function(){

$("#DIV1 input[name=input]").each(function(){

alert($(this).val());

});

}

1

2

3

4

5

function eachSelect(){

//遍历指定选中的select

$("#DIV2 select[class=form-control]").each(function(){

alert($(this).val());

});

//遍历指定选中的select的所有option值

$("#DIV2 select[name=selectname] option").each(function(){

alert($(this).val());

});

}

• 选项一
• 选项二
• 选项三
• 选项四

function eachLi(){

//$(this).removeClass("selected");

$("#DIV3 li").each(function(){

alert($(this).html());

});

}

1	2	3
yi	er	san
一	二	三

function eachTr(){

//$(this).removeClass("selected");

//index 表示遍历的下标      tr遍历对象的别名

$("#DIV4 tr").each(function(index,tr){

alert($(tr).html()+"\n index="+index);

});

//这样取出地表格第三行的第一列 or 第二列的文本值

alert($("#DIV4 table tr:eq(2)").find("td:eq(0)").text());

alert($("#DIV4 table tr:eq(2)").find("td:eq(1)").text());

}

爱好：

看电视

游泳

游戏

把妹

//遍历的另外一种方式

function eachCheckbox(){

$.each($('input:checkbox'),function(i,val){

alert(val.value+"===所有的==="+val.name);

});

//遍历选中的复选框

$("#DIV5 input[name=hobby]:checked").each(function(){

alert("选中的==="+$(this).val());

});

}

var arr= [ "aaa", "bbb", "ccc" ];     

//遍历数组

function eachArr(){

var arr= [ "aaa", "bbb", "ccc" ];

$.each(arr,function(i,val){

alert(i+"::"+val);

});

}

var obj = { one:1, two:2, three:3};    

//遍历json格式(常用于回调解析json格式数据)

function eachJson(){

var obj = { one:1, two:2, three:3};

$.each(obj,function(key,val){

alert(key+":::"+val);

});

}

//指定表单提交

function eachForm(i){

$('form').eq(i).attr('action','/form?num='+i);

$('form').eq(i).submit();

}

//最经常用到的jquery设置 标签的属性值 常用到的方法

function setProperty(){

$('#DIV3').attr("readonly",true);//将input元素设置为readonly

$('#DIV2').attr("disabled","disabled");//将input元素设置为disabled

$("#DIV1").css("display","none");//设置标签隐藏

$("#DIV1 input").addClass("form-control");//设置标签的样式

$(".form-control").removeClass("form-control").addClass("input");//移除替换样式

$('#DIV2').removeAttr("disabled");//去除input元素的disabled属性

$('#DIV3').removeAttr("readonly");//去除input元素的readonly属性

}

function showDiv(){

$("#DIV1").hide();//隐藏

$("#DIV1").show();//显示

}

全选