仅在一个元素的子元素上运行 JQuery 脚本答案

【问题标题】：Run a JQuery script only on childs of one element仅在一个元素的子元素上运行 JQuery 脚本
【发布时间】：2012-06-29 04:33:03
【问题描述】：

是否有一种简单的方法可以只在一个特定表单上运行 JQuery 脚本，并且它是子表单，而不影响网站上的其他表单。

目前我将子选择器与任何其他选择器一起使用，但是是否有一个命令可以让以下选择器在我的表单的子级中匹配？

谢谢

【问题讨论】：

通常是$('#yourform')，与<form id="yourform"。注意，id 属性在 DOM 上是 unique 的，所以你可以只指向一个元素；不要重复使用ids，使用class 来指示与其他元素的系列关系。 # 在选择器中，CSS 是 id 选择器。

【解决方案1】：

你可以使用find:

$('#myform').find('.otherclass').css({color: 'red'})

选择器 .otherclass 仅在 #myform 内部搜索。

还有一个小的重构：

var $f = function(selector) { return $('#myform').find(selector); }

你可以使用：

$f('.otherclass').css({color: 'red'})

获取 jQuery 函数的作用域版本。

【讨论】：

【解决方案2】：

或者你可以直接使用

$('#myform .otherclass').css({color: 'red'})

您也可以使用上述语法添加事件处理程序。前任。

$('#myform .otherclass').click(function(){
// Some code
}) ;

【讨论】：

【解决方案3】：

向下导航 DOM 层次结构方法描述的方法

children() - 选择 jQuery 对象中所有元素的子元素

children(selector) - 选择所有匹配选择器并且是 jQuery 对象中元素的子元素的元素

contents() - 返回 jQuery 对象中所有元素的子元素和文本内容

find() - 选择 jQuery 对象中元素的后代

find(selector),find(HTMLElement),find(HTMLElement[]) - 选择匹配选择器并且是 jQuery 对象中的元素 find(jQuery)

或

关系选择器选择器描述

selector 选择器 - 选择匹配第二个选择器并且是第一个选择器匹配的元素的后代的元素

selector > 选择器 - 选择匹配第二个选择器并且是第一个选择器匹配的元素的子元素的元素

selector + selector - 选择匹配第二个选择器并且是匹配第一个选择器的元素的下一个兄弟的元素

selector ~ selector - 选择匹配第二个选择器并且是匹配第一个选择器的元素的兄弟（并且出现在之后）的元素

【讨论】：