javascript - 无法使用 jQuery 访问 HTML 元素的后代

Question

我在获取父级的子级的 html() 值时遇到问题:D

function voteup(e){
  var count = $(e).parents('.item').children('.count');
  console.log(count.html()); // undefined
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post_contain">
  <img src="images/comments/dQ6dz.jpg" alt="">
</div>
<div class="item">
  <p class="post-meta">
    <span href="/gag/agVzE1g" target="_blank">
      <span class="count">5</span>points
    </span>
  </p>
  <div class="vote">
    <ul class="btn-vote left">
      <li class="badge-item-vote-up-li">
        <a onclick="voteup(this)">Click me</a>
      </li>
    </ul>
  </div>
</div>

在函数voteup(e)中，我需要获取类“count”的值，但我没有使用html()检索该值

Answer 1

children只遍历 DOM 树的单层 - 即它不会找到孙子。

相反，请使用 closest查找 .item - 它找到单个最接近的匹配项，而不是 parents 可以找到多个 - 和 find定位子元素，因为它将遍历任意深度的 HTML 结构:

function voteup(e){
    var count = $(e).closest('.item').find('.count');
    alert(count.html());
    var actual = parseInt(count.html(), 10);
    count.text(actual + 1);
}