Select only individual cast

Question

Select only individual cast

I want to select a specific lione by clicking jQuery in my project. When I click one li, he selects everything li's. This is my violin. I'm just a beginner. I tried using parent () but it does not work. 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>

Run code Hide result

+4

javascript jquery html css

Timilehin Osaze Adegbulugbe Mar 08 '18 at 13:46

source share

1 answer

void · Accepted Answer · 2018-03-08T13:49:17+0000

You need to use .find()to get the element inside the clicked element. In addition, the value you need to display is larger than the value already present in 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>

Run code Hide result

Select only individual cast

More articles: