`

搜索上级dom对象并隐藏,点击隐藏父元素

阅读更多
类似页面如下:

<tr>
  <td><input type="checkbox" class="chk" /></td>
  <td><div class="disabled">text to hide 1</div></td>
  <td><div class="disabled">text to hide 2</div></td>
</tr>



$("input.chk").click(function(){
  $(this).parent().parent().(".disabled").show();
}) ;


实际使用.closest() 和 .find()更合适
$("input.chk").click(function(){
  $(this).closest('tr').find(".disabled").show();
});

当然也可以

$(this).parent().parent().find(".disabled").show();


如果,有多行的话用.delegate()如下:

$("table").delegate("input.chk", "click", function(){
  $(this).closest('tr').find(".disabled").show();
});



#.delegate() instead binds one handler to the table for all of the input.chk elements to bubble up to. If you're looking to enable/disable, use hcnage and .toggle() in addition to the above, like this:
$("table").delegate("input.chk", "change", function(){
  $(this).closest('tr').find(".disabled").toggle(this.checked);
});
分享到:
评论

相关推荐

    DOM — DOM对象继承关系1

    继承自 EventTarget 对象的还有 Node 对象,Node 对象是 DOM 树中的基本单元,表示文档中的一个节点,例如元素、属性、文本等。 Node 对象有多种类型,每种类型都有其特定的属性和方法。例如,Element 对象继承自 ...

    jquerydom对象的事件隐藏显示和对象数组示例

    在本文中,我们将深入探讨jQuery的DOM对象事件处理、隐藏显示功能以及如何操作对象数组。jQuery作为一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互,使得Web开发更加便捷。 首先,让...

    jquery dom对象 详细介绍1

    - **DOM对象**:通过JavaScript原生方法如`getElementById()`获取的元素,可以调用DOM提供的所有属性和方法。 - **jQuery对象**:通过jQuery的选择器或者`$(...)`包裹的元素集合,提供了丰富的jQuery方法,但不能...

    jquery对象和dom对象.doc

    比如,我们常用的选择器`$("#msg")`返回的就是一个jQuery对象,它可能包含一个或多个DOM元素,但这个对象并不能直接使用DOM对象的方法,如`innerHTML`。 转换的关键在于,jQuery对象可以调用jQuery库提供的方法,如...

    XMLDOM对象方法中文手册chm

    这个"XMLDOM对象方法中文手册chm"将详细解释这些概念和方法,并提供示例代码,帮助开发者快速掌握XML DOM技术,有效地处理XML文档。通过深入学习,你可以更好地理解如何在Web开发中利用XML进行数据交换和结构化数据...

    javaScript 生成DOM 对象(html标签).rar

    例如,我们可以创建子元素并将其添加到父元素中: ```javascript var childElement = document.createElement('span'); childElement.textContent = '子元素内容'; newElement.appendChild(childElement); ``` ...

    XMLDOM对象方法手册

    这篇“XMLDOM对象方法手册”提供了关于如何利用XMLDOM对象进行XML操作的详细指南。 1. **XMLDOM对象的创建** 在JavaScript中,可以使用`ActiveXObject`来创建XMLDOM对象,例如: ```javascript var xmlDoc = new...

    jquery对象和dom对象

    通过jQuery选择器,我们可以轻松地选取DOM元素,并将其转换为jQuery对象。jQuery对象拥有丰富的API,提供了更加简便的方式来操作DOM,如`$(selector)`用于选择元素,`.html()`、`.css()`、`.on()`等用于操作元素的...

    DOM对象DOM对象DOM对象.doc

    DOM将整个文档表示为一个树形结构,每个节点代表文档的一部分,如元素、属性、文本等。在JavaScript中,DOM对象是用于操作网页内容的关键工具。 Window对象是DOM中最高级别的对象,它代表浏览器的窗口。Window对象...

    javascript转换字符串为dom对象(字符串动态创建dom).docx

    JavaScript 转换字符串为 DOM 对象(字符串动态创建 DOM) 在 JavaScript 中,动态创建标准的 DOM 对象通常使用 `var obj = document.createElement('div');`,然后再给 `obj` 设置一些属性。但是,在实际使用过程...

    什么是DOM对象?.docx

    * 实现交互效果:我们可以使用 DOM 对象来实现各种交互效果,例如点击事件、hover 事件等。 * 实现动画效果:我们可以使用 DOM 对象来实现各种动画效果,例如页面 loading 动画、滑动动画等。 DOM 对象是前端开发中...

    BOM对象和DOM对象

    **BOM对象与DOM对象详解** 在Web开发中,BOM(Browser Object Model)对象和DOM(Document Object Model)对象是两个至关重要的概念,它们分别处理浏览器交互和HTML文档结构的解析。 **一、BOM对象** BOM,浏览器...

    JavaScript dom操作 dom元素查询 示例代码

    dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom...

    DOM对象模型

    **DOM对象模型** DOM,全称为“Document Object Model”,即文档对象模型,是W3C组织定义的一个标准,用于表示HTML或XML文档的一种结构化表示方式。它将文档解析为一个由节点组成的树形结构,使得JavaScript或其他...

    javascript 原生Dom对象和jQuery对象的联系和区别

    JavaScript中的DOM对象和jQuery对象是两种不同的数据结构,它们在处理网页元素时有着各自的特性和优缺点。了解它们之间的联系和区别对于JavaScript开发者来说至关重要,因为这有助于选择合适的工具进行网页交互。 ...

    .遍历DOM元素

    DOM元素遍历是Web开发中的基础技能,用于访问和操作网页上的每一个节点。本篇文章将深入探讨如何遍历DOM元素,包括不同遍历方法、遍历的应用场景以及注意事项。 一、DOM遍历方法 1. 前向遍历(深度优先遍历) ...

    c#操作浏览器dom对象

    标题中的“C#操作浏览器DOM对象”指的是使用C#编程语言与Web页面的Document Object Model(DOM)进行交互。DOM是HTML和XML文档的一种结构化表示,它允许程序和脚本动态更新、添加或删除页面元素。在C#中,这通常通过...

    angularjs,ng-repeat循环渲染时,无法获取dom对象.pdf

    例如,假设我们需要为`ng-repeat`循环中的每个元素绑定一个事件处理器,这时如果我们立即尝试获取DOM元素并绑定事件,可能会因为元素还未渲染完成而失败。这时,可以使用`$timeout`来包裹事件绑定的代码,如下: ``...

    js中DOM文档对象学习代码

    DOM文档对象是这个标准的核心,允许我们通过编程方式访问和修改页面元素。下面将详细介绍DOM文档对象以及如何在JavaScript中使用它。 首先,DOM是一个树形结构,每个HTML或XML文档都被解析为一个节点层级。根节点是...

    jQuery获取当前点击的对象元素(实现代码)

    jQuery获取当前点击的对象元素(实现代码) [removed][removed] &lt;/head&gt; &lt;body&gt; 段落1 段落2 段落3 段落4 ... //获取当前点击的对象 ... //this表示当前被点击元素,但是此时我们当做dom对象

Global site tag (gtag.js) - Google Analytics