对Ul下的li标签执行点击事件——如何获取你所点击的标签
问题所来:做项目时,一般的数据都是用循环动态加载出来的,结构都是一样的,只是绑定的值不同,如何对相同的标签做处理的问题就来了。
例如:点谁就显示谁的数值
<ul >
<li id="test" class="test1">1</li>
<li id="test" class="test1">2</li>
<li id="test" class="test1">3</li>
<li id="test" class="test1">4</li>
</ul>
错误:这种做法永远只能取到第一个
$("#test").click(function(){
alert($(this).text());
});
1解: 没有class属性的时候
在相同的标签外部(随便找一个即可,需要包裹所有的相同标签)
( ul包裹了所有的li, on里面的 第一个参数:需要的做的事件类型,第二个参数:对谁做 执行这个事件的对象)
对于ul中的li
$("ul").on("click","li#test",function(){
alert($(this).text());
});
对于表格中的td
<table class="display" id="example" cellspacing="0" width="100%">
<thead>
<tr> <th>型号编号</th> <th>型号名称</th> <th>型号描述</th> <th>创建时间</th> <th>操作</th> </tr>
</thead>
<tbody>
<tr> <td>1</td> <td>车子</td> <td>描述</td> <td>2016/11/15</td> <td> <button id='delrow' type='button'>删除</button> </td> </tr>
<tr> <td>2</td> <td>衣服</td> <td>描述2</td> <td>2016/11/16</td> <td><button id='delrow' type='button'>删除</button></td> </tr>
</tbody>
</table>
$('#example tbody').on('click', 'button#delrow', function () {
var tt = $("#example").DataTable();
tt.row($(this).parents('tr')).remove(); //删除你点击的行
});
2解:有class属性 通过循环来做
$(".test").each(function(){
alert( $(this).text());
});
3解:有class属性
$(".test").click(function(){
alert( $(this).text());
});
对Ul下的li标签执行点击事件——如何获取你所点击的标签的更多相关文章
- jquery选择div下的ul下的li下的a
使用jQuery选择器: $("div#div的id ul li a")//选择的是div下 ul下所有li下的所有a标签 $("div#div的id").ch ...
- 遍历ul下的li,点击弹出li的索引
首先我们需要一个html结构 <div > <ul> <li>a</li> <li>a</li> <li>a< ...
- js点击事件防止用户重复点击执行
点击事件里给button标签加一个自定义属性,存上次点击时间 追问: 求详细代码,JS 真心的没怎么做过 追答: <input type="button" id=&quo ...
- 关于<ul> 下的 <li> 里面的<a> 标签字体颜色不能控制
1.元展示 <ul class="ul"> <li><a href="#">菜单一</a></li> ...
- 为所有的Ul下的li标签添加点击事件
- jquery,javascript -设置某一ul下的li下的 a的属性
//javascriptvar ul = document.getElementById('ul); var as = ul.getElementsByTagName('a'); for(var i ...
- 问题:FF中把UL下的LI设为左浮动UL的背景色就没有了?
因为容器的子元素设置浮动后, 内容移出了文档流! 解决办法: 1.给个overflow:hidden;作为闭合浮动元素2.设定UL 一个固定的高度 下面是一些与之相关的解决办法,参考文章<那些 ...
- 给ul下的li加click时间
$('.province ul li').click(function() {//方法 });
- ul下的li浮动,如何是ul有li的高度
此时ul展示的界面为: ①给ul加上一个样式,display:inline-block; <html> <head> <title>float</title& ...
随机推荐
- HDU 5144 NPY and shot(三分法)
当时做这道题时一直想退出物理公式来,但是后来推到导数那一部分,由于数学不好,没有推出来那个关于Θ的最值,后来直接暴力了,很明显超时了,忘了三分法的应用,这道题又是典型的三分求最值,是个单峰曲线,下面是 ...
- 公共Webservice
网络上可供测试的Web Service腾讯QQ在线状态 WEB 服务Endpoint: http://www.webxml.com.cn/webservices/qqOnlineWebService. ...
- Html.RenderPartial与Html.RenderAction区别(转)
Html.RenderPartial与Html.RenderAction这两个方法都是用来在界面上嵌入用户控件的. Html.RenderPartial是直接将用户控件嵌入到界面上: <%Htm ...
- YII框架中php入口文件隐藏
Apache配置修改 主要修改下httpd文件中的两个地方 1.启用mod_rewrite.so模块,在Apache的配置文件中找到如下行,去掉前面的字符"#",保存 #LoadM ...
- Android应用清单文件:AndroidManifest.xml
AndroidMainfest.xml清单文件是每个Android项目所必需的,它是整个Android应用的全家描述文件. <?xml version="1.0" encod ...
- oracle 数据库开发面试题,当时笔试的时候一个没做出来,现附原题及答案
1. ID123567810111215 表名tt,用sql找出ID列中不连续的ID,例如其中没有的4: --创建表及数据 CREATE TABLE tt(ID INTEGER); INSERT IN ...
- ubuntu11.10(TQ210)下移植boa服务器
平台:ubuntu11.10 一.下载源码包www.boa.org boa-0.94.13.tar.gz 二.解压,在其src目录下生产makefile #tar xvfz boa-0.94.1 ...
- 【插件】WordPress缓存最佳组合:DB Cache Reloaded Fix + Hyper Cache
DB Cache Reloaded Fix是一个出色的WordPress数据库缓存插件,可以大大减少对数据库的请求次数. Hyper Cache 是非常小巧但很强大的WordPress缓存插件,设置简 ...
- C/C++堆栈指引(转)
C/C++堆栈指引 Binhua Liu 前言 我们经常会讨论这样的问题:什么时候数据存储在堆栈(Stack)中,什么时候数据存储在堆(Heap)中.我们知道,局部变量是存储在堆栈中的:debug时, ...
- d039: 点的位置
内容: 已知一平面直角坐标系中正方形的左上(-2,2)和右下(2,-2)的顶点坐标,,当给一个点的坐标,判断点和正方形的关系,在正方形内(含边上)输出True ,否则输出 False 输入说明: 一行 ...