通过 DOM 遍历隐藏元素答案

【问题标题】：Hiding an element through DOM traversal通过 DOM 遍历隐藏元素
【发布时间】：2016-07-11 07:13:45
【问题描述】：

如果它的父母很少怎么办？（如祖父母、曾祖父母）

<div class="lvl1">
    <div class="lvl1.1">
        <div class="lvl1.2">
            <button class="btn-submit">Click Me</button>
            <div class="a1">Hello
        <div>
    </div>
</div>

<div class="lvl2">
    <div class="b1">
         <div class="b2">Make me disappear!</div>
    </div>
</div>

<div class="lvl3">
    <div class="c1">Thank you.
    </div>
</div>

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

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

【问题讨论】：

使用find()，而不是children()
其实我只是想知道如何使用这些方法（.parent、.siblings 等）。有什么例子吗？
jQuery 文档揭示了一切：api.jquery.com
作为替代方案：不要。使用特定的类和/或数据属性来匹配按钮与内容。使用 parents/siblings/children 等会使您的 html 过于静态，任何更改（例如添加另一个包装 div 或移动订单）都会以难以发现的错误方式破坏您的代码。

标签： javascript jquery html function

【解决方案1】：

如果我假设您重复了该结构并希望删除与单击的.btn_submit 相同的副本，我们通过closest 转到.lvl1，然后转到.lvl2通过.nextAll().first()（或者我们可以只使用.next)，然后.find.b2在那里：

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

您的代码非常接近，我只需要更改两件事：

我没有使用.siblings(".lvl2")，而是使用.nextAll(".lvl2").first() 来查找紧跟在“this”之后的.lvl1。
我使用了find 而不是children，因为children 只会下降一级（直接子级），不会搜索后代

我还使用了closest(".lvl1")，因此如果您将.btn_submit 更深地移动到.lvl1，它将继续工作。

现场示例：

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

<div class="lvl1">
  <button class="btn-submit">Click Me</button>
  <div class="a1">Hello
  </div>
</div>

<div class="lvl2">
  <div class="b1">
    <div class="b2">Make me disappear!</div>
  </div>
</div>

<div class="lvl3">
  <div class="c1">Thank you.
  </div>
</div>

<div class="lvl1">
  <button class="btn-submit">Click Me</button>
  <div class="a1">Hello
  </div>
</div>

<div class="lvl2">
  <div class="b1">
    <div class="b2">Make me disappear!</div>
  </div>
</div>

<div class="lvl3">
  <div class="c1">Thank you.
  </div>
</div>

<div class="lvl1">
  <button class="btn-submit">Click Me</button>
  <div class="a1">Hello
  </div>
</div>

<div class="lvl2">
  <div class="b1">
    <div class="b2">Make me disappear!</div>
  </div>
</div>

<div class="lvl3">
  <div class="c1">Thank you.
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

【讨论】：

如果 btn-submit 有祖父母和曾祖父母怎么办？
@Bexie：closest 停在最近的一个。（从技术上讲，它也是从元素本身开始的，所以如果.btn-submit also 是.lvl1，我们需要parents(".lvl1").first() 或parent().closest(".lvl1")。但事实并非如此，所以我们可以只使用简单的。）

【解决方案2】：

有可能直接使用消失div，

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

但如果你想使用“.parent, .parents, .siblings, .children, .next, .prev”，

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

需要你的 children() 两次...因为 .b2 不是 .lvl2 的直接子项，

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

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

所以你的答案是：

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

【讨论】：

如果 btn-submit 有祖父母和曾祖父母怎么办？
这将隐藏所有的.b2s，而不仅仅是与被点击的特定.btn-submit的结构相关的那个。
@T.J.克劳德，一个很好的观点，你的答案适用于所有场景。感谢您增加我的思维方式...

【解决方案3】：

.children 选择元素的 children 而不是 descendants。您只需将.children 替换为.find 方法，您的代码就会选择目标元素。

【讨论】：

为什么这被否决了？正确答案：jsfiddle.net/RoryMcCrossan/dw77k0px
谢谢@RoryMcCrossan :) 如果它的父母很少怎么办？
我没有投反对票，也没有理由这样做。但有一件事：如果我们假设结构是重复的，这不是唯一的问题。 siblings(".lvl2") 将匹配所有兄弟.lvl2 元素，因此我们最终隐藏了它们的所有.b2s。
@RoryMcCrossan 感谢您制作小提琴。
@Vohuman 没问题，正要发布它作为答案，但你打败了我 :)