使用jquery在html表单中隐藏第二个字段集答案

【问题标题】：Hide second fieldset in html form using jquery使用jquery在html表单中隐藏第二个字段集
【发布时间】：2014-10-09 14:45:02
【问题描述】：

我得到了一个结构如下的表单：

<form id="user-profile-form" >

 <fieldset> .... </fieldset>

 <fieldset> .... </fieldset>

 <fieldset> .... </fieldset>

 <fieldset> .... </fieldset> 

</form>

我正在尝试使用 jquery 隐藏第二个字段集。我尝试使用以下 jquery 代码向该字段集添加一个类：

$('#user-profile-form fieldset:nth-child(2)').addClass('test-class');

下面也试过了：

$('#user-profile-form fieldset:nth-child(2)').hide()

我无法直接访问表单，因为它是在代码的其他地方生成的。我只需要一个 jquery 脚本来隐藏第二个字段集。 nthchild 应该可以工作，但我不知道为什么，它不工作。

感谢您的 cmets。

【问题讨论】：

你的代码对我有用jsfiddle.net/victor_007/k2namnfr
对我来说它不起作用，他回答中的 Ehsan Sajjad 代码对我有用。
@altafhussain 再次：使用您提供的信息，它可以工作，正如您在提到的小提琴中看到的那样。
是的，我在小提琴中检查了它，但我不知道为什么它不起作用。

标签： jquery html

【解决方案1】：

您的代码应该可以工作，将其放入 $(document).ready(function(){ ..}); 或 $(function(){...}); 并尝试一下。

注意 - 确保您的表单 id 在整个 DOM 中是唯一的

$(document).ready(function(){
  $('#user-profile-form fieldset:nth-child(2)').addClass('test-class');
});

或

$(document).ready(function(){
   $('#user-profile-form fieldset:nth-child(2)').hide();
 });

【讨论】：

多个表单相同的ID是我想到的第一件事，+1。
但是 Op 使用的是子编号而不是 id
不知何故无法正常工作。 Ehsan Sajjad 代码为我工作。是的，我按照你的描述使用它:)
@EhsanSajjad 如果页面上有两个具有相同 ID 的表单，就会造成各种麻烦。
页面上没有重复的ID。另外，如果有重复ID的表单，上面的所有代码都会出现问题。

【解决方案2】：

怎么样：

$('#user-profile-form fieldset:eq(1)').addClass('test-class');

`:eq` 和`:nth-child` 的区别：

:eq() 根据它在所选元素数组中的索引来选择一个元素。

:nth-child() 选择其父元素的第 n 个子元素。

来自forum.jquery.com：

nth-child 是 1 索引，而 eq 是 0 索引。 nth-child 基于当前元素的父元素，而 .eq 基于当前元素相对于选定元素的索引。它们是两种完全不同的方法，具有两种完全不同的目的。

关注link 以更好地了解:nth-child 和:eq 选择器之间的区别。

你也可以参考这个SO question : jQuery difference between :eq() and :nth-child()

【讨论】：

谢谢，它成功了。你能解释一下为什么 nthchild 不工作吗？
嗯，是的，我怀疑<fieldset>s之前还有其他标签，所以因为加上:nth-child(n)，所有的孩子都被计算在内，不管他们是什么，并且仅当指定的元素与附加到伪类的选择器匹配时才会选择它。有问题，+1。并以fiddle 为例。

:eq 和:nth-child 的区别：

`:eq` 和`:nth-child` 的区别：