How to target a particular element from the set of elements sharing the same class in jquery?

Question

I have few divs which share the same class called inner. Now I am able to access the first div of this class by doing something like

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

Basically I want to target this div on mouse click hence the event.target.

This works great but I want to use number to access the div. Say I want to access the second div of this class So I do something like this

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

But I do not get any result. What am I doing wrong?

@CertainPerformance this works. But for some reason the code I posted didn't work though I thought both are same. You may post your answer and I will accept. — Souvik Ray, Sep 03 '20 at 07:07

score 1 · Answer 1 · answered Sep 03 '20 at 06:48

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>

Nice explanation! +1 for this. Though I believe @CertainPerformace answered first. — Souvik Ray, Sep 03 '20 at 07:08

How to target a particular element from the set of elements sharing the same class in jquery?

1 Answers1