如何针对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})`)

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

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>