如何使用jQuery选择特定子元素的特定子元素并隐藏？

你的问题核心是层级选择和选择器使用有误，先给你正确的实现方式，再分析你之前写法的问题：

正确写法 #

方式一：链式调用（更直观） #

// 先选中.container下的第二个.form（索引从0开始，eq(1)对应第二个），再选中该form下的第二个.row
$('.container .form').eq(1).find('.row').eq(1).css("display", "none");
// 或者用jQuery的hide()方法更简洁
$('.container .form').eq(1).find('.row').eq(1).hide();

方式二：直接使用:nth-child选择器（从1开始计数） #

// :nth-child(2)直接匹配父元素下的第二个子元素
$('.container .form:nth-child(2) .row:nth-child(2)').hide();

你之前写法的错误分析 #

1. 第一种写法：$('.container:nth-child(2)').eq(1).css("display", "none")

   • .container:nth-child(2)是找父元素下的第二个子元素且class为container的元素，但你的DOM里container是唯一的根容器，这一步就没选到正确元素，后续的eq(1)更无法定位到目标row。

2. 第二种写法：$('.container').children("form").eq(1).css("display", "none")

   • 错误1：children("form")是找container下的<form>标签，但你的DOM里是class为form的<div>，应该写children(".form")；
   • 错误2：即使修正了选择器，这个写法是隐藏整个第二个.form元素，而不是该form内部的第二个.row。

内容的提问来源于stack exchange，提问作者user10602119