jquery - 在 jQuery 中将closest() 和 html() 放在一起的问题

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 不是触发 click 事件的 .up 元素的父元素。

要解决此问题，您可以使用 closest() 获取最近的公共(public)父级，即本例中的 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>