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

具体案例如下：

只给一个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://blog.youkuaiyun.com/luman1991/article/details/54316197