jquery - 如何从jquery中共享同一类的元素集中定位特定元素？

Question

我很少divs有共享同一个类的inner. 现在我可以div通过做类似的事情来访问这个类的第一个

$(event.target).parent().find(".inner:first")

基本上我想div通过鼠标点击来定位它，因此event.target.

这很好用，但我想使用数字来访问div. 说我想访问这个类的第二个 div 所以我做这样的事情

n = 1
$(event.target).parent().find(`.inner:eq(${n})`)

但我没有得到任何结果。我究竟做错了什么？

标签： jquery

Answer 1

function checked(e, n){
    $(event.target).parent().find(".active").removeClass("active");
  var selectedDiv = $(event.target).parent().find('.inner').eq(n);
  $(selectedDiv).addClass("active");
}

.main{
  padding:5px;
}

.inner{
    border:1px solid #000;
    border-radius:5px;
  padding:5px;
  margin:5px 0;
}
.inner:hover{
  background:#eee;
  cursor:pointer;
}

.inner.active{
  background:#800000;
  cursor:pointer;
  color:#fff
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main">
  <div class="inner" onclick="checked(event, 0)">Inner 0</div>
  <div class="inner" onclick="checked(event, 1)">Inner 1</div>
  <div class="inner" onclick="checked(event, 2)">Inner 2</div>
  <div class="inner" onclick="checked(event, 3)">Inner 3</div>
  <div class="inner" onclick="checked(event, 4)">Inner 4</div>
  <div class="inner" onclick="checked(event, 5)">Inner 5</div>
</div>