Проблема с помещением closest () и html () вместе в jQuery

Question

Я создал систему голосования для своего проекта. Я попытался использовать приведенный ниже код, который работает правильно, но html() не работает с этим. Кто-нибудь может мне помочь с этим?

$(document).ready(function() {
  $(".up").click(function() {
    $(this).addClass('active_vote');
    $('.active_vote').closest('.rating').html('18');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="suggestions">
  <li id="59">
    <div class="vote active ">
      <div class="support-feature-request-voted">
        <div class="rating">
          10
        </div>
        <span>Voted</span>
      </div>
    </div>
    <div class="title">hii</div>
    <div class="desc">desc1</div><br>
    <a class="up">UP VOTE</a><a class="down">DOWN VOTE</a>
  </li>
  <li id="60">
    <div class="vote active ">
      <div class="support-feature-request-voted">
        <div class="rating">
          8
        </div>
        <span>Voted</span>
      </div>
    </div>
    <div class="title">hello</div>
    <div class="desc">desc2</div><br>
    <a class="up">UP VOTE</a><a class="down">DOWN VOTE</a>
  </li>
</ul>

Answer 1

Проблема заключается в том, что .rating не является родителем элемента .up, который вызывает событие click.

Чтобы исправить это, вы можете использовать closest(), чтобы получить ближайшего общего родителя, в данном случае li, затем find(), чтобы получить .rating. Также обратите внимание, что оба оператора в обработчике событий могут быть объединены. Попробуйте это:

let result2 = "Lorem ipsum";

jQuery(function() {
  $(".up").on('click', function() {
    $(this).addClass('active_vote').closest('li').find('.rating').html(result2);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="suggestions">
  <li id="59">
    <div class="vote active">
      <div class="support-feature-request-voted">
        <div class="rating">
          10
        </div>
        <span>Voted</span>
      </div>
    </div>
    <div class="title">hii</div>
    <div class="desc">desc1</div><br>
    <a class="up">UP VOTE</a><a class="down">DOWN VOTE</a>
  </li>
  <li id="60">
    <div class="vote active">
      <div class="support-feature-request-voted">
        <div class="rating">
          8
        </div>
        <span>Voted</span>
      </div>
    </div>
    <div class="title">hello</div>
    <div class="desc">desc2</div><br>
    <a class="up">UP VOTE</a><a class="down">DOWN VOTE</a>
  </li>
</ul>

Answer 2

Используйте parent с find.

$(document).ready(function() {
  $(".up").click(function() {
    $(this).addClass('active_vote');
    $(this).parent().find('.rating').html('result2'); // Your upvote logic goes with result2
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="suggestions">
  <li id="59">
    <div class="vote active ">
      <div class="support-feature-request-voted">
        <div class="rating">
          10
        </div>
        <span>Voted</span>
      </div>
    </div>
    <div class="title">hii</div>
    <div class="desc">desc1</div><br>
    <a class="up">UP VOTE</a><a class="down">DOWN VOTE</a>
  </li>
  <li id="60">
    <div class="vote active ">
      <div class="support-feature-request-voted">
        <div class="rating">
          8
        </div>
        <span>Voted</span>
      </div>
    </div>
    <div class="title">hello</div>
    <div class="desc">desc2</div><br>
    <a class="up">UP VOTE</a><a class="down">DOWN VOTE</a>
  </li>
</ul>