Question

如果父母很少怎么办？（如祖父母，曾祖父母）

START

JS

<div gridster="gridsterOpts">
    <ul>
        <li gridster-item="item" ng-repeat="item in standardItems">
            <input type="text" integer ng-model="item.row" size="1" />,
            <input type="text" integer ng-model="item.col" size="1" />
            <br />
            <input type="text" integer ng-model="item.sizeX" size="1" />x
            <input type="text" integer ng-model="item.sizeY" size="1" />

            <div  class="gridster-no-drag" style="height: 100px; width: 100px; overflow: auto;">
                 <table  class="gridster-no-drag" style="width:100%">
                  <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Age</th>
                  </tr>
                  <tr>
                    <td>Jill</td>
                    <td>Smith</td>
                    <td>50</td>
                  </tr>
                  <tr>
                    <td>Eve</td>
                    <td>Jackson</td>
                    <td>94</td>
                  </tr>
                </table> 
            </div>
        </li>
    </ul>
</div>

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

Answer 1

如果我假设您重复了该结构，并且想要删除与所点击的.btn_submit相同副本中的那个结构，我们会通过.lvl1前往closest，通过.lvl2转到.nextAll().first()（或者我们可以使用.next)，然后.find使用.b2：

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

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

我使用.siblings(".lvl2")而不是使用.nextAll(".lvl2").first()来查找所有这些内容，而是使用.lvl1来找到＃34}之后的那个＆＃34;这个＆＃34; find。
我使用children代替children，因为closest(".lvl1")只会降低一级（直接子级），而不是搜索后代

我还使用了.btn_submit，因此如果您将.lvl1更深入$(function() { $(".btn-submit").click(function() { $(this) .closest(".lvl1") .nextAll(".lvl2") .first() .find(".b2") .hide(); }); });，它将继续有效。

直播示例：

＆＃13;

<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>

＆＃13;

spark-env.sh

＆＃13;

Answer 2

可以直接使用

消除div

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

但是如果你想使用＆＃34; .parent，.parents，.siblings，.children，.next，.prev＆＃34;，

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

需要你的孩子（）两次......因为.b2不是.lvl2的直接孩子，

另一种隐藏的最佳方式＆＃34; .b2＆＃34;是，

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

所以你的答案是：

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

Answer 3

.children选择元素的子而不是后代。您只需要使用.children方法替换.find，您的代码就会选择目标元素。

通过DOM遍历隐藏元素

3 个答案: