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();
}

  

时间: 2024-08-08 20:02:25

jQuery获取点击对象的父级的相关文章

JS和jQuery获取节点的兄弟,父级,子级元素

原文转自http://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素. <div id="test"> <div></div> <div></div> </div> 原生的J

WPF利用VisualTreeHelper遍历寻找对象的子级对象或者父级对象

简介 本文将完整叙述我利用VisualTreeHelper实现题述功能的全部过程,想直接看函数实现的朋友可以跳到函数实现部分. 或者直接在GitHub上下载源码. 在WPF中我们经常会遇到这种情况:当我们尝试着去寻找窗体或者页面中某个控件的子控件或者父控件的时候,我们只能寻找到它的第一级的逻辑子级对象或者父级对象.当我们想更深入的时候,就没有办法了. 甚至在我们自定义的DataTemplate中的控件,我们都没办法对其访问.比如在ListView中自定义的控件,我们就没办法获取指定位置的控件了.

jq点击元素删除父级

首先要能找到父级:需要操作的dom结构如下: <tbody> <tr> <td>星期一早起</td> <td class="status">未完成</td> <td><a class="delete" href="javascript:;">删除</a></td> </tr> </tbody> 用pare

jquery获取点击控件的绝对位置简单实例

在使用jquery的过程中,想取得当前点击input的绝对位置而去显示一个div,jquery本身提供offset和position这个两个方法,但position官方解释是relative to the offset parent,可以看到是针对父结点的,而offset官方解释relative to the document,貌似使用offset可以直接绝对定位.但是在网页中如果出现嵌套div的情况,top和left会叠加,因此这个时候如果要定位显示一个新的div就要把父亲结点的offset去

JS获取节点的兄弟,父级,子级元素

先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 <div id="test"> <div></div> <div></div> </div> 原生的JS获取ID为test的元素下的子元素.可以用: var a = docuemnt.getElementById("

锋利的jQuery-2--判断jQuery获取到的对象是否存在$().length

1.使用js获取不存在的对象: document.getElementById("tt").style.color = "red"; 如果网页中不存在id = "tt"的元素,浏览器就会报错,需要: if(document.getElementById("tt")){ document.getElementById("tt").style.color = "red"; } 2.使用jQu

jquery获取点击标签内的子标签内容和值实例

今天有点累了,就不多做其他的描述解释.在插入的代码里相关解释也都有. <!--<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.

jquery 获取日期 date 对象、 判断闰年

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>时间</title> <script src="scripts/jquery-1.7.1.min.js"></script> </head> <body> <script type=&

js和jquery获取文档对象以及滚动条位置

<div style="width:120px;height:120px;border:1px solid red; position:absolute; left:800px; top:100px; z-index:1001;" id="AdminUserStateDiv">                </div>        <div class="div1">层1</div><di