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 Checkbox 传递多个值给后台
------前台JS "<input class=\'jTabCheck2\' type=\'checkbox\' partvguid=" + obj + " pr ...
- Javaweb开发中URL路径的使用
看到博客园孤傲苍狼的web系列文章中有关于URL路径的使用文章后,感觉自己对URL的使用清楚了很多,自己再对着动手写一遍以加深记忆. JavaWeb开发中常看到URL以"/"开头, ...
- linux环境下搭建环境发布web项目
在公司真是学习了一下项目环境在linux下搭建和发布的过程,这是每个程序员都应该掌握的一个技能,将整理下为以后温习用,也乐于和为掌握这些技能的猿分享: 这里主要分为5部分:1.安装jdk,并配置环境变 ...
- org.apache.log4j.Logger 详解
org.apache.log4j.Logger 详解 1. 概述 1.1. 背景 在应用程序中添加日志记录总的来说基于三个目的 :监视代码中变量的变化情况,周期性的记录到文件中供其他应用进行统计 ...
- BOGEER博格尔YT-813码表使用说明书 (我的是YT-823)
BOGEER博格尔YT-813码表使用说明书.doc 源:http://w.gdu.me/wiki/Bike/BOGEER-YT-813.html 参数设置 首先要测量出车轮的周长,测出车轮周长后按住 ...
- Map - leetcode [哈希表]
149. Max Points on a Line unordered_map<float, int> hash 记录的是斜率对应的点数 unordered_map<float, i ...
- Chapter 21_5 替换
gsub函数的第三个参数不仅是一个字符串,还可以是一个函数或table. 如果是函数,gsub会在每次找到匹配时调用该函数.调用时的参数是捕获到的内容,该函数的返回值作为要替换的字符串. 如果是tab ...
- CodeForces 670F Restore a Number
模拟. 首先暴力找到答案的位数,然后就是分类讨论输出答案. #pragma comment(linker, "/STACK:1024000000,1024000000") #inc ...
- JavaScript忍者秘籍——驯服线程和定时器
1.定时器和线程 - 设置和清除定时器 JavaScript提供了两种方式,用于创建定时器以及两个相应的清除方法.这些方法都是window对象上的方法. 方法 格式 描述 setTimeout i ...
- java 随机生成11位 组合
public static String generate8RateUuid() { String[] chars = new String[] { "a", & ...