如何使用 jQuery select 下一个或最后一个元素

Question

我是 jQuery 的新手。我正在单击发送 ajax 请求的 link，在回调中我想更改下一个 p 元素的文本。我的 html 代码：

                <div> 
                 <img src="/images/{{comment.commenterPicName}}" class="img-circle">
                 <b>{{comment.commenterFirstName}}</b>
                 <p>{{comment.commentMessage}}</p>

                 {% if comment.isLiked %}
                    <a class="comment-like" id="{{comment.id}}">Unlike</a>
                 {% else %}
                    <a class="comment-like" id="{{comment.id}}">Like</a>
                 {% endif %}
                    <p>{{comment.likersCount}}</p>
                </div>

我的jQuery代码：

$(".comment-like").click(function(e) {
var el =  $(this);
if ($(this).html() == "Like") {
    var parameters = { commentId: $(this).attr('id')};
    $.get(
        "/likeComment",
        parameters,
        function(data) { 
          el.parent().children('p').last().text(data);
        }
    );
    $(this).html('Unlike');
}
else {
    var parameters = { commentId: $(this).attr('id')};
    $.get(
        "/unlikeComment",
        parameters,
        function(data) { 
          el.parent().children('p').last().text(data);
        }
    );
    $(this).html('Like');
}

我的问题是我无法更改包含 likersCount 的 p 元素。我尝试了 .next() .last() 等。请帮忙。提前致谢。

Answer 1

您可能正在寻找 .siblings() 选择器。您可以将它与其他 jQuery 选择器一起使用来遍历您的 HTML.

此选择器获取与您从中调用它的任何元素处于同一级别的所有元素。您可以在这里找到更多信息。 http://api.jquery.com/siblings/

Answer 2

我终于找到了解决办法。

而不是：

el.parent().children('p').last().text(data);

我不得不简单地使用：

el.next('p').text(data);

这将始终 select 下一个 p 元素，这正是要求。

如何使用 jQuery select 下一个或最后一个元素

how to select next or last elememt using jQuery

jquery

html

ajax

swig-template