Вопрос: Как вы переходите к предыдущему div и его дочерним элементам, когда $ (this) находится в другом div? - PullRequest
Новая
       19

Вопрос: Как вы переходите к предыдущему div и его дочерним элементам, когда $ (this) находится в другом div?

0 голосов
/ 08 ноября 2018

Вот мой код, который я пробовал до сих пор:

поэтому, когда я нажал на a-ссылку (которая имеет класс '.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>

1 Ответ

0 голосов
/ 08 ноября 2018

Предположения:

  • у вас есть несколько пар .postInfo и .mt-2, а не только одна пара в вопросе.
  • вы не можете обернуть postInfo / mt-2 в другой класс (это сделает это намного проще)

Вам нужно получить самую близкую .row к нажатой ссылке, затем использовать .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>
...