JS和jQuery的遍历和赋值操作

ul li遍历

• JS

var list = document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
    $li = list[i];
}

• jQuery

$('#div').find('li').each(function() {
    $(this).click(function() {
        // 控制台打印日志
        console.log($(this).index());
    })
})

var terrainType;
$("#terrainAnalysis li").each(function(){
   if($(this).hasClass('layui-this')){
	   terrainType = $(this).attr("data-type")
   }
});

// 取出所有div，并遍历
$("div").each(){
    //判断每一个div，其css中display是否为block
    if($(this).css("display")=="block"){
        alert('您想要的元素');
    }
};

$("input[name='role'][value='"+roleId+"']").attr("checked", true);

jQuery操作select控件

• 判断checkbox 是否被选中

var isChecked= $("#city").attr("checked");

• 获取下拉列表的选中的值

var city= $("#city option:selected").val(); 

• 清空下拉列表

$('#city').empty();

• 遍历option

existOptText = $("#city option").each(function() {
    var op = $(this).text(); 
});

jQuery常用操作

• 赋值

$(".activeRate").html(data.activeRate);

• jQuery 动态添加、删除class，添加css样式

$(".activeRate").addClass("icon-upward");
$(".activeRate").removeClass("icon-upward");

$(".firstRate").css('color','#ff0914');

ul和li

• jQuery 判断ul下是否存在li

$("ul").has("li").length > 0;
$("ul > li").length > 0;
$("ul").find("li").length > 0;

• jQuery 获取兄弟节点

$('#id').siblings() 当前元素所有的兄弟节点
$('#id').prev() 当前元素前一个兄弟节点
$('#id').prevaAll() 当前元素之前所有的兄弟节点
$('#id').next() 当前元素之后第一个兄弟节点
$('#id').nextAll() 当前元素之后所有的兄弟节点