JS和jQuery的遍历和赋值操作

悠悠 2022-05-16 08:34 221阅读 0赞

## 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() 当前元素之后所有的兄弟节点