问题：当 $(this) 在另一个 div 中时，如何遍历到前一个 div 及其子节点？

Question

这就是我到目前为止尝试过的代码：

所以当我点击 a-link（它有一个 class '.like'）时，我想要（'.PostlikeCount' [在 div.postInfo ]) 以显示新的总点赞金额。

$(".like").click(function(e) {
  e.preventDefault()
  $.ajax({
    method: "GET",
    url: $(this).attr("href"),
    success: function(response) {
      console.log(response)

      $(this).parents("div.row").prevAll().first().find("span.PostlikeCount").html(response.total_likes)
    }
  });
});

<div class="row postInfo">
  <small class="font-weight-light col-8 ">
     <span class="PostlikeCount">{{post.likePost.count}}</span> people like this 
  </small>
  <small class="font-weight-light ml-3 viewAll"><a href= "#">view all comment</a>
  </small>
</div>

<hr>

<div class="mt-2 row">
  <span class="col-9 postLike">
    <a href="{%url 'likes:like_Post' post_id=post.id location='homePage'%}" class="d-inline-block like">
      <span><i class="far fa-heart "></i> Like</span>
    </a>
  </span>

</div>

Answer 1

假设：

您有多个 .postInfo 和 .mt-2 对，而不仅仅是问题中的一对。
你不能将 postInfo/mt-2 包裹在另一个 class 中（这样会更容易）

您需要获得最接近 .row 的点击 link，然后使用 .prevAll(".postInfo") 找到相关的 postInfo，然后在下面找到它以获得 PostLikeCount。

你的代码和这个的区别是

.prevAll(".postInfo")

将给出所有先前的“.postInfo”节点，而不是所有先前的节点。使用 .prevAll 时，它们的顺序相反，因此 .first() 将在 HTML.

中正确找到正上方的那个

第二个区别是 .closest(".row") 会找到 .row 的第一个父级。您的代码很可能无法正常工作，因为您嵌套了 .row div（问题中未显示），但您只想要与 .postInfo

处于同一级别的代码

我删除了不相关的 ajax 调用以提供工作片段。

$(".like").click(function(e) {
  e.preventDefault()
  $(this)
    .closest("div.row")
    .prevAll(".postInfo")
    .first()
    .find("span.PostlikeCount").html($(this).data("result"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row postInfo">
  <small class="font-weight-light col-8 ">
     <span class="PostlikeCount"><em>result here</em></span> people like this 
  </small>
  <small class="font-weight-light ml-3 viewAll"><a href= "#">view all comment</a>
  </small>
</div>

<hr>

<div class="mt-2 row">
  <span class="col-9 postLike">
    <a href="#" class="d-inline-block like" data-result='11'>
      <span><i class="far fa-heart "></i> Like</span>
    </a>
  </span>

</div>

<div class="row postInfo">
  <small class="font-weight-light col-8 ">
     <span class="PostlikeCount"><em>result here</em></span> people like this 
  </small>
  <small class="font-weight-light ml-3 viewAll"><a href= "#">view all comment</a>
  </small>
</div>

<hr>

<div class="mt-2 row">
  <span class="col-9 postLike">
    <a href="#" class="d-inline-block like" data-result='22'>
      <span><i class="far fa-heart "></i> Like</span>
    </a>
  </span>

</div>

问题：当 $(this) 在另一个 div 中时，如何遍历到前一个 div 及其子节点？

Query: How do you traverse to a previous div and to its children when $(this) is in another div?

html

ajax

jquery

traversal

parent