jquery 里 $(this)的用法
当遇到循环table时,查看其中的td、tr属性和值会有一点的麻烦。此时就必须使用$(this)来解决这一类的问题了。
1.直接使用
2.间接使用
<table>
<?php foreach($shoplist as $v){ ?>
<tr>
<td>{$v.goods_name}</td>
<td>颜色:灰色</td>
<td id="num">
<div class="c_num" goods_id="{$v.goods_id}">
<input type="text" value="{$v.number}" name="" class="car_ipt" />
</div>
</td>
<td id="jiage">¥{$v['number'] * $v['price']}</td>
<td id="update"><a goods_id="{$v.goods_id}">删除</a></td>
</tr>
<?php }; ?>
</table>
<script>
//1.直接在事件中使用 (父级事件发生后,获取子类的值)
$("#update a").click(function(){
$goods_id=$(this).attr("goods_id");
})
//2.$(this).parent().next().html()不起作用是,可分为两步去完成
//这是$(this)的第二种用法(间接使用,可与find()、parent()等,联合使用)
$(".c_num").click(function(){
div=$(this).parent(); //第一步
$goods_id=$(this).attr("goods_id");
$number=$(this).find(".car_ipt").val();
//alert($number+$goods_id);
$.ajax({
type:"get",
url:"{:U('home/buycar/number')}",
data:"goods="+$goods_id+"&number="+$number,
success:function(msg){
div.next("td").html("¥"+msg); //第二步
}
})
})
</script>
html
代码如下 | 复制代码 |
<p class="item"> <input type="text" name="meta_key[164]" value="file1" size="20" /><a href="/18" id="164" class="button remove">remove</a> </p> |
需求说明:
鼠标点击‘remove’链接,根据ajax的返回值删除页面元素。
无效的方法
代码如下 | 复制代码 |
$('.remove').bind('click',function(){ $.ajax({ type:'post', url:$(this).attr('href'), dataType : 'json', data:{id : $(this).attr('id')}, success:function(msg){ if(msg.error==0){ alert(msg.msg); }else{ $(this).parent().remove(); //此处无法获得父级元素 } } }); return false; }); |
有效的方法
代码如下 | 复制代码 |
$('.remove').bind('click',function(){ div=$(this).parent(); //先获取父级元素 $.ajax({ type:'post', url:$(this).attr('href'), dataType : 'json', data:{id : $(this).attr('id')}, success:function(msg){ if(msg.error==0){ alert(msg.msg); }else{ div.remove(); //再删除 } } }); return false; }); |
其他类似问题也可以通过相同方法解决
jquery 里 $(this)的用法的更多相关文章
- jQuery中Animate进阶用法(一)
jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...
- jQuery中eq()方法用法实例
本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...
- jQuery中$.fn的用法示例介绍
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效,下面有个不错的示例,喜欢的朋友可以参考下 如扩展$.fn.abc(),即$.fn.abc()是对jquery ...
- jquery.validate.min.js 用法方法示例
页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- jQuery中attr()方法用法实例
本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元 ...
- jQuery中each的用法之退出循环和结束本次循环
jQuery中each的用法之退出循环和结束本次循环 jQuery中each类似于javascript的for循环 但不同于for循环的是在each里面不能使用break结束循环,也不能使用conti ...
- jQuery.extend函数详细用法!
最近在研究jQuery.把jQuery.extend扩展函数的用法记录下来. 1.扩展jQuery静态方法. }) 用法: $.test() 2.合并多个对象.为jQuery.extend(css1, ...
- jQuery中$.each的用法
jQuery中$.each的用法 本文导读:jQuery中each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理.jQuery提供的each方法 ...
- jQuery中on()方法用法实例详解
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...
- Jquery插件placeholder的用法
闲的蛋疼,演示一下Jquery插件placeholder的用法,借助该插件能够轻松实现HTML5中placeholder特效: 效果图: 实现代码: <%@ page language=&quo ...
随机推荐
- 【JS学习笔记】函数传参
比如仅仅改变背景的颜色 函数传参:参数就是占位符. 那么在什么时候用传参呢?函数里定不下来的东西. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- 《DSP using MATLAB》示例Example6.4
图形表达如下: 代码: b = [1, 0, 0, 0, 16+1/16, 0, 0, 0, 1]; [b0, B, A] = dir2cas(b, 1) 运行结果: 写成公式为
- [转]解决VS2008 开发Windows Mobile 项目生成速度慢的问题
最近用VS2008开发Windows Mobile程序,使用C#..NET Compact Framework,发现项目生成速度比较慢.用VS2008打开项目后,开始一段时间生成速度还能忍受,时间一长 ...
- vue-router之router-link
<router-link> 组件支持用户在具有路由功能的应用中(点击)导航. 通过 to 属性指定目标地址,默认渲染成带有正确链接的 <a> 标签,可以通过配置 tag 属性生 ...
- Vim扩展YouCompleteMe插件
在Vim中安装YouCompleteMe插件 一.安装前的说明: 1.确保vim版本>=7.4,若MAC OS,建议直接安装MacVim(8.0版本). ps:如果不想使用MacVim的GUI, ...
- [ An Ac a Day ^_^ ] [kuangbin带你飞]专题八 生成树 UVA 10600 ACM Contest and Blackout 最小生成树+次小生成树
题意就是求最小生成树和次小生成树 #include<cstdio> #include<iostream> #include<algorithm> #include& ...
- Unity3d请求webservice
我们在对接第三方sdk时,第三方sdk通常会以一个webservice接口的形式供我们来调用.而这些接口会以提供我们get,post,soap等协议来进行访问.get,post方法相信大家都比较熟悉了 ...
- Dom编程(一)
dom:document object model 文档对象模型 1.事件 body 事件:onload onunload onbeforeunload body.document对象的事件 (1)o ...
- 不安装rpm包,取出rpm包里的文件
1.查看rpm包里的文件 [root@VM_166_132 ~]# rpm -qlp mysql5.6.29-1-3.x86_64.rpm |more/etc/ld.so.conf.d/mysql-5 ...
- java-进程
一个java进程,只有一个入口,就是main方法. tomcat是一个java进程,tomcat只有一个入口,org.apache.catalina.startup.Bootstrap 类的main ...