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

具体案例如下:

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

1)html部分

     

2)jquery部分

var listmenu = ["能源","水电","光伏","风电","配网"];
    function limenu(){
        for (var i = 0 ;i < 5; i++ ) {
            $(".list_industry").append($("

  • "+listmenu[i]+"
  • "));
            }
        }
        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.csdn.net/luman1991/article/details/54316197

    你可能感兴趣的:(jquery)