对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& ...
随机推荐
- webpy:页面下载的三种实现方式
python: 1.import urllib urlretrieve() 方法直接将远程数据下载到本地. >>> help(urllib.urlretrieve)Help on f ...
- dl标签和table标签
dl标签定义了一个定义列表 <html> <body> <h2>一个定义列表:</h2> <dl> <dt>计算机</ ...
- Highcharts 设置折线图的显示与隐藏
1.初始化隐藏某条曲线 series 配置如: [ {name:"发帖", postCountData}, {name:"删帖帖", deleteCountDa ...
- yii2 添加模块过程
本文以Yii2基本应用程序模板为例,介绍下向该框架下加入新模块的过程: 1. 新建模块相关目录与文件 step 1: 新建目录结构 首先在根目录下新建modules目录,然后在该目录下面添加模块目 ...
- java的final变量理解
java的final变量理解 final基本类型是数值不能改变 final对象是引用不能改变,对象其自身是可以被修改的.
- wildfly部署solr.war
1.添加solr/home配置,有两种途径: 一个是修改solr.war包的web.xml,路径如下:solr-4.7.2.rar\WEB-INF\web.xml,添加如下内容:
- SpringBoot入门系列:第一篇 Hello World
跟随SpringBoot的文档(http://docs.spring.io/spring-boot/docs/current-SNAPSHOT/reference/htmlsingle/#boot-d ...
- Topshelf
Topshelf允许开发者创建一个简单的控制台程序,将其安装为一个window服务. 这样做的原因很简单:方便调试. 使用命令行工具可以很方面的安装Topshelf创建的服务. server.exe ...
- MS SQL Sever数据库还原
一.右键 数据库 二.点击 [还原文件和文件组(E)...],弹出下图的窗口界面 1.在 目标数据库 的输入框填写你的数据库名(注意这是新建一个数据库供还原使用,不能还原到已有的数据库) 三.点击[源 ...
- 华为S5300交换机配置基于接口的本地端口镜像
配置思路 1. 将Ethernet0/0/20接口配置为观察端口(监控端口) 2. 将Ethernet0/0/1----Ethernet0/0/10接口配置为镜像端口 配置步骤 1. 配置观察端 ...