javascript - 如何使用 Jquery 选择具有特定类的父级的子级？

Question

我试图根据类(class)选择一个 child ，然后用它做事。我做不到。我只能使用索引来做到这一点，如下所示:

.children().eq([index])

<小时/>

<div class="container>
    <div class="row">
    <div class="col></div>
    </div>
    </div>

        <script>
    $(document).on('click','.col',(e)=>{
    parent = $(e.target).parent().parent()
    $(parent).children('.row').hide()

    })
    </script>

我无法做到这一点。

Answer 1

函数parent只会返回上一级的直系 parent 。您需要的是closest以避免必须链接父级调用:

$('.container').on('click', '.col', (e) => {
   $(e.target).closest('.container').children('.row').hide()
});

同样，children仅适用于直接子元素，适用于您需要的嵌套元素 find .

请注意，您的委托(delegate)元素是搜索的基本元素，因此您可以直接使用它，而不是遍历 dom:

$(e.delegateTarget).children('.row').hide()

$('.container').on('click', '.col', (e) => {
  $(e.delegateTarget).children('.row').hide()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col">This will be hidden</div>
  </div>
  <div>
    <div class="col">This wont be hidden</div>
  </div>
  <div class="row">
    <div class="col">This will be hidden</div>
  </div>
</div>