Question

我在div里面有一个按钮。单击时，我将需要获取一个列表的长度，该列表是父容器的兄弟。甚至可能是祖父母的容器。

代码的要点如下所示。（我的实际代码实际上比这个例子嵌套得更深。我想知道如何定位父母或祖父母的兄弟姐妹，甚至伟大的祖父母......）

HTML

<div>
  <div class="button-parent">
    <div class="button-containers">
      <button>Click Here!</button>
    </div>
  </div>
  <div class="list-container">
    <ul class="lists">
      <li>bar</li>
      <li>bar</li>
      <li>bar</li>
      <li>bar</li>
      <li>bar</li>
    </ul>
  </div>
</div>

jquery的

$('button').parent('button-parent')
           .closest('list-containers').length

Answer 1

.closest()找到最近的祖先（父级），因此找不到您的.list-container。

你可以通过几种方式做到这一点......

为您的周围div提供一个班级，并使用.find()找到您的列表，如果它是您父级div中的唯一列表：
```
$('button').closest('.parent-div').find('.list-container');
```
如果next()始终是.list-container之后的下一个项目，请使用.button-parent：
```
$('button').closest('.button-parent').next('.list-container');
```
如果.siblings()始终与.list-container位于同一DOM级别，则可以使用.button-parent：
```
$('button').closest('.button-parent').siblings('.list-container');
```

Answer 2

我想你可以使用使用父母（[选择器]）或最近的（[选择器]）与兄弟姐妹（[选择器]）

parents（）查找祖先，如果你只想选择祖先中的第一个，那么也可以使用nearest（）
兄弟姐妹（）选择兄弟姐妹
您可以传递选择器或使用eq（）
您的jquery代码段似乎没有包含的其他内容。用于类选择器

我尝试和工作的三种方法是

$('button').parents().eq(1).siblings('.list-container');
$('button').parents('.button-parent').siblings('.list-container');
$('button').closest('.button-parent').siblings('.list-container'));

查看此jsfiddle，我已使用三种方法选择了列表容器

有没有办法在jquery中达到父母的兄弟姐妹？

2 个答案: