Javascript 通过DOM遍历隐藏元素

如果它几乎没有父母呢？（与祖父母、曾祖父母一样）

---

如何使用.parent、.parents、.sides、.children、.next、.prev显示和隐藏div？

。children

选择元素的子元素，而不是子元素。您只需将

.children

替换为

.find

方法，您的代码将选择目标元素。

如果我假设您重复了该结构，并希望删除与单击的

相同副本中的一个。btn_submit

，我们将通过

最近的
转到
.lvl1
，通过
.nextAll（）.first（）
（或者我们可以使用
.next）
，然后
，找到
中的
.b2
：

$(".btn-submit").click(function() {
    $(this).closest(".lvl1").nextAll(".lvl2").first().find(".b2").hide();
});

您的代码非常接近，只有两件事我必须更改：


我使用
.nextAll（.lvl2”）.first（）
来查找紧跟在“this”
.lvl1
之后的一个，而不是使用
.sillides（.lvl2”）
，它将查找所有的
我使用了
find
而不是
children
，因为
children
只会下降一级（直接子级），而不会搜索子级

我还使用了
最近（“.lvl1”）
，这样，如果您将
.btn\u submit
移动到
.lvl1
的更深处，它将继续工作

实例：


$（函数（）{
$（“.btn提交”）。单击（函数（）{
$（本）
.最近（“.lvl1”）
.nextAll（“.lvl2”）
.first（）
.find（“.b2”）
.hide（）；
});
});

点击我
你好
让我消失！
非常感谢。
点击我
你好
让我消失！
非常感谢。
点击我
你好
让我消失！
非常感谢。
可以直接使用

$(".b2").hide();

但如果您想使用“.parent、.parents、.sibbins、.children、.next、.prev”

需要给你的孩子们打两次电话。。。因为.b2不是.lvl2的直接子级

隐藏“.b2”的另一个最佳方法是

因此，您的Ans是：

 $(".btn-submit").click(function() { 
           $(".btn-submit").parent().siblings(".lvl2").find(".b2").hide(); 
 });

使用
find（）
，而不是
children（）。有什么例子吗？jQuery文档揭示了所有：作为替代：不要。使用特定的类和/或数据属性将按钮与内容匹配。使用父母/兄弟姐妹/子女等会使您的html过于静态，任何更改（如添加另一个包装器div或移动顺序）都会以一种难以发现错误的方式破坏您的代码。为什么会被否决？这是正确的答案：谢谢@Rorymcrossan:）如果它的父母很少呢？我没有投反对票，也没有看到这样做的好理由。但有一件事：如果我们假设结构是重复的，这不是唯一的问题<代码>同级（“.lvl2”）
将匹配所有同级
.lvl2
元素，因此我们最终隐藏了它们的
.b2
s。感谢您创建了一个小提琴。@Vohuman没问题，本打算将其作为答案发布，但你抢先告诉了我：）如果btn提交有祖父母和曾祖父母呢？这将隐藏所有的
.b2
s，而不仅仅是与单击的特定
.btn提交的结构相关的内容。@T.J.Crowder，一个很好的观点&你的答案适用于所有场景。谢谢你增加了我的思维方式……如果btn提交有祖父母和曾祖父母呢？@Bexie:
最近的
在最近的一个停下来。（从技术上讲，它也是从元素本身开始的，因此如果
.btn submit
也是
.lvl1
，我们需要
父元素（“.lvl1”）.first（）
或
父元素（）.closest（.lvl1”）
。但是它不是，所以我们可以使用简单的一个。）
$(".b2").hide();

$(".btn-submit").parent().siblings(".lvl2").children().children(".b2").hide();

$(".btn-submit").parent().siblings(".lvl2").find(".b2").hide();

 $(".btn-submit").click(function() { 
           $(".btn-submit").parent().siblings(".lvl2").find(".b2").hide(); 
 });