javascript - 无法使用 .not() 或 :not properly

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>