您的位置:首页 > Web前端 > JQuery

jquery拼接html标签及追加对应的事件

2018-07-18 08:41 232 查看

具体案例如下:

只给一个ul标签,实现里面li标签的追加生成。

1)html部分

<ul class="list_industry"> </ul>

2)jquery部分

var listmenu = ["能源","水电","光伏","风电","配网"];
    function limenu(){
        for (var i = 0 ;i < 5; i++ ) {
            $(".list_industry").append($("<li><a href='#'>"+listmenu[i]+"</a></li>"));
        }
    }
    limenu();  //调用使函数生效

3)对每一个追加上的li标签添加事件方法

$(".list_industry").find("a").each(function(i){
        $(this).click(function(){
            //1、改变相关标题
            $("#title").html(titlemenu[i]);
        })
    });

【注:此处的each(i)中的i为找到的对应的a标签所在的下标,可以用来查看其对应的index】

 

补充:jquery中each方法的几种写法及对应的使用方式

1、选择器+遍历

$('div').each(function (i){

i就是索引值

this 表示获取遍历每一个dom对象

});

2、选择器+遍历

$('div').each(function (index,domEle){

index就是索引值

domEle 表示获取遍历每一个dom对象

});

另外附上该部分参考的地址:https://www.geek-share.com/detail/2695042327.html

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: