Question

为什么我不能在.red上添加.out类，却不能排除最接近的那个？

$('.ring').on('click', function() {

  $(this).not().closest('out').addClass('red');
});

div {
  height: 100px;
  width: 100px;
  float: left;
  margin: 2px;
}

.ring {
  background: grey;
}

.out {
  background: khaki;
}

.red {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="map">
  <div class="data">
    <div class="ring"></div>
  </div>
  <div class="out"></div>
</div>
<div class="map">
  <div class="data">
    <div class="ring"></div>
  </div>
  <div class="out"></div>
</div>
<div class="map">
  <div class="data">
    <div class="ring"></div>
  </div>
  <div class="out"></div>
</div>
<div class="map">
  <div class="data">
    <div class="ring"></div>
  </div>
  <div class="out"></div>
</div>
<div class="map">
  <div class="data">
    <div class="ring"></div>
  </div>
  <div class="out"></div>
</div>

Answer 1

我会使用index来做到这一点：

$('.ring').on('click', function() {
  $(".red").removeClass("red");
  var index = $(".ring").index(this);  
  $(".out").not(":eq("+index+")").addClass('red');
});

div {
  height: 100px;
  width: 100px;
  float: left;
  margin: 2px;
}

.ring {
  background: grey;
}

.out {
  background: khaki;
}

.red {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="map">
  <div class="data">
    <div class="ring"></div>
  </div>
  <div class="out"></div>
</div>
<div class="map">
  <div class="data">
    <div class="ring"></div>
  </div>
  <div class="out"></div>
</div>
<div class="map">
  <div class="data">
    <div class="ring"></div>
  </div>
  <div class="out"></div>
</div>
<div class="map">
  <div class="data">
    <div class="ring"></div>
  </div>
  <div class="out"></div>
</div>
<div class="map">
  <div class="data">
    <div class="ring"></div>
  </div>
  <div class="out"></div>
</div>

Answer 2

我将红色类添加到所有内容中，然后将其从相邻元素中删除。您不太正确地使用not函数。

此解决方案使用父级从所选元素中查找树，直到找到地图，然后执行find来标识父级下面的.out：

// add red class to all elements with .out
$('.out').addClass('red');
// remove red from out under parent .map
$(this).parents('.map').find('.out').removeClass('red');

Answer 3

您使用的closest错误。 out不是ring的上升点。您需要遍历父母并获得所有兄弟姐妹

$(this).closest('.map').nextAll(':not(:first)').find('.out').addClass('red')

如果要对下一个元素也进行着色，则删除:not(:first)

无法使用.not（）或：不正确

3 个答案: