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://www.geek-share.com/detail/2695042327.html
阅读更多- ajax请求到后台数据,前台不用拼接字符串append追加HTML标签,使用空模板一样显示到页面
- jQuery从html代码中获取对应标签的写法
- Jquery选择选择动态添加HTML标签的事件
- 1、input hidden change事件失效2、html通过js追加的元素jquery事件失效
- [置顶] ajax请求到后台数据,前台不用拼接字符串append追加HTML标签,一样显示到页面 (使用空模板)
- HTML Select 标签选择后触发jQuery事件代码实例
- 在javascript或者jQuery中绑定按钮点击事件,和在HTML 标签中直接调用onclick属性有什么区别?
- jquery html拼接标签的显示和隐藏
- Ajax动态拼接HTML,JS失效的解决——Jquery的事件委托
- jQuery .html()用为读取和修改元素的HTML标签 对应js中的innerHTML[通过ID获取元素]
- jquery操作radio标签的选中事件
- HTML标签对应全称及描述
- 使用jQuery模拟鼠标点击a标签事件
- jquery 给html指定标签增加元素
- jquery 为a标签绑定click事件示例代码
- jquery动态添加带有样式的HTML标签元素方法
- html中的video标签 方法_事件汇总
- jQuery为DOM动态追加事件的方法
- jquery触发a标签跳转事件示例代码
- jquery 学习(四) 获取标签中的值||text()与html的区别,以及jquery对象与dom对象的转换