使用jquery以html格式隐藏第二个字段集

Question

我得到了一个具有以下结构的表单：

<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应该有用，但我不知道为什么，它不起作用。

感谢您的评论。

Answer 1

您的代码应该可以使用，将其放在$(document).ready(function(){ ..});或$(function(){...});内并尝试使用。

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

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

OR

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

Answer 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基于当前元素parent，而.eq基于当前元素相对于所选元素的索引。它们是两种完全不同的方法，有两种截然不同的目的。

  

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

您也可以参考此SO question : jQuery difference between :eq() and :nth-child()