Select only specific li clicked

Question

I want to select the specific li clicked using jQuery in my project. When I click on one li, it selects all the li's. This is my fiddle. I am just a beginner. I have tried using parent(), but it is not working. JS FIDDLE

This is my HTML:

var clicks = 0;
$("li").on("click", function () {
  clicks++;
  $('.top-right').html(clicks);
});

.list li {
  list-style-type: none;
  display: inline-block;
  background-color: white;
  margin-right: 7px;
}

.list {
  margin: 5px;
}

.list li a {
  text-decoration: none;
  color: black;
  padding: 2px;
}

.list li a:hover,
.list li a:hover {
  color: black;
}

<!DOCTYPE html>
<html>

<head>
  <title>Exam</title>
</head>

<body>
  <div class="list">
    <ul>
      <li>
        <a href="#">NAME
          <span class="line"></span> AWONUSI OLAJIDE</a>
        <span class="top-right"></span>
      </li>
      <li>
        <a href="#">NAME
          <span class="line"></span> ADEGBULUGBE TIMILEHIN</a>
        <span class="top-right"></span>
      </li>
      <li>
        <a href="#">NAME
          <span class="line"></span> OLUOLU ADEDEJI</a>
        <span class="top-right">9999</span>
      </li>
      <li>
        <a href="#">NAME
          <span class="line"></span> OYAJE JOSHUA</a>
        <span class="top-right">9999</span>
      </li>
      <li>
        <a href="#">NAME
          <span class="line"></span> ALABI OJO ADE</a>
        <span class="top-right">9999</span>
      </li>
      <li>
        <a href="#">NAME
          <span class="line"></span> AKILO AWANI</a>
        <span class="top-right">9999</span>
      </li>
      <li>
        <a href="#">NAME
          <span class="line"></span> AYUBA DEJIMARK</a>
        <span class="top-right">9999</span>
      </li>
    </ul>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
</body>

</html>

[jQuery Event Basics | jQuery Learning Center](https://learn.jquery.com/events/event-basics/) — Andreas, Mar 08 '18 at 13:48
Possible duplicate of [Get clicked element using jQuery on event?](https://stackoverflow.com/questions/16091823/get-clicked-element-using-jquery-on-event) — Andreas, Mar 08 '18 at 13:48
Not an exact dupe as the OP is trying to get something inside of the clicked element — Huangism, Mar 08 '18 at 14:02

score 3 · Accepted Answer · answered Mar 08 '18 at 13:49

You need to use .find() to get the element inside the clicked element. Also the value you need to display is one more than the value already present inside it.

$("li").on("click", function() {
  $(this).find('.top-right').html(function(){
    return +$(this).html() + 1
  });
});

$("li").on("click", function() {
  $(this).find('.top-right').html(function(){
    return +$(this).html() + 1
  });
});

.list li {
  list-style-type: none;
  display: inline-block;
  background-color: white;
  margin-right: 7px;
}

.list {
  margin: 5px;
}

.list li a {
  text-decoration: none;
  color: black;
  padding: 2px;
}

.list li a:hover,
.list li a:hover {
  color: black;
}

<!DOCTYPE html>
<html>

<head>
  <title>Exam</title>
</head>

<body>
  <div class="list">
    <ul>
      <li><a href="#">NAME   <span class="line"></span> AWONUSI OLAJIDE</a><span class="top-right"></span></li>
      <li><a href="#">NAME   <span class="line"></span> ADEGBULUGBE TIMILEHIN</a><span class="top-right"></span></li>
      <li><a href="#">NAME   <span class="line"></span> OLUOLU ADEDEJI</a><span class="top-right">9999</span></li>
      <li><a href="#">NAME   <span class="line"></span> OYAJE JOSHUA</a><span class="top-right">9999</span></li>
      <li><a href="#">NAME   <span class="line"></span> ALABI OJO ADE</a><span class="top-right">9999</span></li>
      <li><a href="#">NAME   <span class="line"></span> AKILO AWANI</a><span class="top-right">9999</span></li>
      <li><a href="#">NAME   <span class="line"></span> AYUBA DEJIMARK</a><span class="top-right">9999</span></li>
    </ul>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</body>

</html>

Select only specific li clicked

1 Answers1