当遇到循环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)的用法的更多相关文章

  1. jQuery中Animate进阶用法(一)

    jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...

  2. jQuery中eq()方法用法实例

    本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...

  3. jQuery中$.fn的用法示例介绍

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效,下面有个不错的示例,喜欢的朋友可以参考下 如扩展$.fn.abc(),即$.fn.abc()是对jquery ...

  4. jquery.validate.min.js 用法方法示例

    页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  5. jQuery中attr()方法用法实例

    本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元 ...

  6. jQuery中each的用法之退出循环和结束本次循环

    jQuery中each的用法之退出循环和结束本次循环 jQuery中each类似于javascript的for循环 但不同于for循环的是在each里面不能使用break结束循环,也不能使用conti ...

  7. jQuery.extend函数详细用法!

    最近在研究jQuery.把jQuery.extend扩展函数的用法记录下来. 1.扩展jQuery静态方法. }) 用法: $.test() 2.合并多个对象.为jQuery.extend(css1, ...

  8. jQuery中$.each的用法

    jQuery中$.each的用法   本文导读:jQuery中each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理.jQuery提供的each方法 ...

  9. jQuery中on()方法用法实例详解

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...

  10. Jquery插件placeholder的用法

    闲的蛋疼,演示一下Jquery插件placeholder的用法,借助该插件能够轻松实现HTML5中placeholder特效: 效果图: 实现代码: <%@ page language=&quo ...

随机推荐

  1. 导入导出csv文件

    在工作中需要把csv文件数据导入数据库或者把数据库数据导出为csv文件.以下是我的简单的实现. <?php class csv { public $db_connection; public $ ...

  2. C基于客户端的通信实例

    运行环境liunx 需求:客户端对服务器发送一个TCP连接,连接成功之后发送数据并接收返回数据 代码如下: #include <sys/socket.h> #include <net ...

  3. 如何对Javascript代码进行二次压缩(混淆)

    如何对Javascript代码进行二次压缩(混淆) 对Javascript代码进行压缩(混淆),可以有效减少传输和加载时间.但是,不是所有的变量(方法)都能被混淆的,一般来说,只有非属性的变量(方法) ...

  4. 脚本录制--html模式和url模式

    设置位置:tool--recording options-recording 1.html模式--默认---结果较简单 脚本采用html页面的形式来展示,优点:容易维护.容易理解 2.url模式--- ...

  5. 9.XML文件解析

    一.XML简介 XML(EXtensible Markup Language),可扩展标记语言 特点:XML与操作系统.编程语言的开发平台无关 实现不同系统之间的数据交换 作用:数据交互 配置应用程序 ...

  6. netty(5)高级篇-私有协议栈

    来源:<Netty权威指南>  作者:李林峰 一.私有协议介绍 由于现代软件的复杂性,一个大型软件系统往往会被人为地拆分称为多个模块,另外随着移动互联网的兴起,网站的规模越来越大,业务功能 ...

  7. 极路由器刷机安装ss插件最新教程

    极路由器系统升级后,旧的插件已不可用,这里是最新极路由器刷机教程,可实现绑定ss代理账号的功能. 获取root权限 安装开发者插件,获取root权限,请先登录极路由器后台(电脑浏览器访问 192.16 ...

  8. python3中字典的copy

    字典是可变的: first和second同时指向一个字典.first修改也会影响second.在程序中一定注意对字典参数的修改会对原始的字典进行修改.这也体现了字典是可变的. 字典的copy方法是浅拷 ...

  9. Jquery 2个数组,去除重复的项目

    长数组(Positions_Check) 短数组(PositionTitlesParent_Check) for (var i = 0; i < PositionTitlesParent_Che ...

  10. centos redis 安装

    # wget http://download.redis.io/releases/redis-2.8.6.tar.gz # tar xzf redis-2.8.6.tar.gz # cd redis- ...