Question

也许我错了，如果是这样纠正我。当我们使用兄弟css选择器db.users.dropIndex('emails.address_1');搜索来自.firstclass + .secondclass父母的.secondclass时，我的问题与解决方案类似。

我需要访问一个类名为.firstclass的元素，该元素实际上与.btn不在同一个父元素中。这是一个HTML：

.btn.active

我需要设置当前活动按钮（按钮2）的下一个（按钮三）元素的样式。

没有<div class="row parent2"> <div class="col-xs-3 parent1"> <button class="btn btn-default">One</button> </div> <div class="col-xs-3 parent1"> <button class="btn btn-default active">Two</button> </div> <div class="col-xs-3 parent1"> <button class="btn btn-default">Four</button> </div> <div class="col-xs-3 parent1"> <button class="btn btn-default">Five</button> </div> </div>。

有什么建议吗？

Answer 1

您必须将具有active类的元素更改为较高的元素。

所以，而不是：

  <div class="col-xs-3 parent1">
    <button class="btn btn-default active">Two</button>
  </div>

更改为：

  <div class="col-xs-3 parent1 active">
    <button class="btn btn-default">Two</button>
  </div>

然后你就可以访问兄弟姐妹了。

Answer 2

您无法使用CSS执行此操作，因为您无法选择您尝试的父元素：.active =＆gt;父.parent1 =＆gt;下一个.parent1 =＆gt;孩子.btn。

你可以用jQuery代替它：

$('.active').parent().next().children('.btn')

演示：JSFiddle

Answer 3

您还可以使用以下内容。

$('.active').closest('div').next().children('.btn');

＆＃13;

$('.active').closest('div').next().children('.btn').css('color', 'blue');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row parent2">
  <div class="col-xs-3 parent1">
    <button class="btn btn-default">One</button>
  </div>
  <div class="col-xs-3 parent1">
    <button class="btn btn-default active">Two</button>
  </div>
  <div class="col-xs-3 parent1">
    <button class="btn btn-default">Three</button>
  </div>
  <div class="col-xs-3 parent1">
    <button class="btn btn-default">Four</button>
  </div>
</div>

＆＃13;

如何从二级父级访问元素？

3 个答案: