jQuery获取点击对象的父级
一、使用$('body').on('click','.index',function(event){})绑定事件时,例:
<div class="project-box">
<a href="javascript:void(0)">
<div class="clearfix">
<p>项目名称:</p>
<p class="p-name">超级玛丽 for andriod</p>
</div>
<div class="clearfix">
<p>项目类型:</p>
<p class="p-type">游戏开发</p>
</div>
<div class="clearfix">
<p>项目人员:</p>
<p class="p-people">andriod开发工程师 UI设计师</p>
</div>
<div class="clearfix">
<p class="pro-time">2017-6-15</p>
</div>
<div class="join-pro">
<button class="join" type="text">点击参与</button>
</div>
</a>
</div>
点击class = "join"获取class="project-box"下的class="p-name":
$('body').on('click','.index',function(event){
var target = event.target;
if(target.className === 'join'){
let projectName = $(target).parents(".project-box").find(".p-name").html();
console.log(projectName);
}
});
二、常规方法获取点击对象的父元素
<div class="col-xs-12 col-sm-6 col-md-3 project-box">
<a href="javascript:void(0)">
<div class="clearfix">
<p>项目名称:</p>
<p class="p-name">超级玛丽 for andriod</p>
</div>
<div class="clearfix">
<p>项目类型:</p>
<p class="p-type">游戏开发</p>
</div>
<div class="clearfix">
<p>项目人员:</p>
<p class="p-people">andriod开发工程师 UI设计师</p>
</div>
<div class="clearfix">
<p class="pro-time">2017-6-15</p>
</div>
<div class="join-pro">
<button class="join" type="text">点击参与</button>
</div>
</a>
</div>
点击class = "join"获取class="project-box"下的class="p-name":
$(".join).onclick = function(){
$(this).parent().parent().parent().toggle();
}
jQuery获取点击对象的父级的更多相关文章
- JS和jQuery获取节点的兄弟,父级,子级元素
原文转自http://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的 ...
- WPF利用VisualTreeHelper遍历寻找对象的子级对象或者父级对象
原文:WPF利用VisualTreeHelper遍历寻找对象的子级对象或者父级对象 简介 本文将完整叙述我利用VisualTreeHelper实现题述功能的全部过程,想直接看函数实现的朋友可以跳到函数 ...
- JS - 点击事件排除父级标签
点击事件排除父级标签,这里使用的是stopPropagation()方法.event.stopPropagation(); 对了,这里还用了解除click事件,unbind. 下面这篇博文,介绍挺全的 ...
- 使用jquery刷新当前页面、刷新父级页面
如何使用jquery刷新当前页面 下面介绍全页面刷新方法:有时候可能会用到 window.location.reload(); //刷新当前页面.(我用的这个一个,非常好) parent.locati ...
- 【震惊】padding-top的百分比值参考对象竟是父级元素的宽度
引言 书写页面样式与布局是前端工程师Coding 中必不可少的一项工作,在定义页面元素的样式时,padding 属性也是经常被使用到的. padding 属性用于设置元素的内边距,其值可以是lengt ...
- jq点击元素删除父级
首先要能找到父级:需要操作的dom结构如下: <tbody> <tr> <td>星期一早起</td> <td class="status ...
- JS获取节点的兄弟,父级,子级元素
https://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作 ...
- jquery获取点击控件的绝对位置简单实例
在使用jquery的过程中,想取得当前点击input的绝对位置而去显示一个div,jquery本身提供offset和position这个两个方法,但position官方解释是relative to t ...
- 锋利的jQuery-2--判断jQuery获取到的对象是否存在$().length
1.使用js获取不存在的对象: document.getElementById("tt").style.color = "red"; 如果网页中不存在id = ...
随机推荐
- PHP之Boolean
Boolean布尔类型 这是最简单的类型.Boolean表达了真值,可以为true或者false. 语法 要指定一个布尔值,使用常量true或者false,两个都不区分大小写. 通常运算符所返回的Bo ...
- [cloud][sdn] LBaaS/neutron / Octavia
清晰/浅显: http://www.cnblogs.com/sammyliu/p/4656176.html IBM:写的一般般,价值不大 https://www.ibm.com/developerwo ...
- 转:手把手教你如何玩转Solr(包含项目实战)
原文地址:手把手教你如何玩转Solr(包含项目实战) 参考原文
- ASMCMD报错解决:sh: /u01/app/11.2.4/grid/bin/clsecho: No such file or directory
sh: /u01/app/11.2.4/grid/bin/clsecho: No such file or directory 在登录asmcmd时报此错误,尝试解决,刷新oracle_sid也不行 ...
- LeetCode 258 Add Digits 解题报告
题目要求 Given a non-negative integer num, repeatedly add all its digits until the result has only one d ...
- sed命令 windows与linux换行
Linux的Bash命令中有一个sed操作,SSD的create_list.sh中有用到这个操作: 结合着下面这个解释: 也就是删除所有行里面的以VOC2007/Annotations/(这里的\代表 ...
- 什么是HDFS
HDFS是什么:HDFS即Hadoop分布式文件系统(Hadoop Distributed Filesystem),以流式数据访问模式来存储超大文件,运行于商用硬件集群上,是管理网络中跨多台计算机存储 ...
- c语言指针应用
指针变量指向数组元素: #import <stdio.h> int main() { int a[10]={1,2,3,4,5,6,7,8,9,0}; int *p; p=a; for ( ...
- dedecms怎样调用指定id文章?
前面我们聊了帝国cms如何调用指定id的文章到首页,作为同行的织梦cms应该也是可以实现的吧?那么,dedecms怎样调用指定id文章呢?使用idlist直接调用指定的ID这样的方法是比较好的.官方给 ...
- MySQL 5.7 的SSL加密方法
MySQL 5.7 的SSL加密方法 MySQL 5.7.6或以上版本 (1)创建证书开启SSL验证--安装opensslyum install -y opensslopenssl versionOp ...