jQuery 遍历 - parents() 方法

一.前言

首先交代一下使用场景:

上图是一个微信投票的功能,当我们点击某个用户进行投票,后台响应成功以后。在不刷新页面的情况下，我们需要在js中更新该用户票数。由于点击事件是绑定在投票按钮，那么我们如何更新当前点击用户的票数？这里就要用到jQuery 遍历 - parents() 方法。

二.方法详解

关于parents() 方法的详情介绍,大家可以参考jQuery 遍历 - parents() 方法

三.案例实现

1.需求分析

在这里,我们重点来看该功能的实现,如果大家想要了解用户投票信息列表如何循环展示,并且绑定了点击事件,可以参考我的这篇博客thymeleaf页面中使用data-*自定义属性

首先我们来看下代码片段:

        <!--排行榜-->
        <div class="voteList" th:if="${total !=null}">
            <dl th:each="user,iterStat : ${total}" class="mineMsg flex" >
                <dt class="flex">
                <div th:if="${iterStat.count <= 3}" th:class="${iterStat.count <= 3}? 'mineMsg_rank'" th:text="${iterStat.count}"></div>
                <div th:if="${iterStat.count >3}" th:class="${iterStat.count > 3}? 'mineMsg_rank rankLast'" th:text="${iterStat.count}"></div>
                <img class="mineMsg_avatar" th:src="${user.headUrl}" alt="">
                <div class="mineMsg_info">
                    <p class="mineMsg_name" th:text="${user.userName}"></p>
                    <p th:text="'ID:'+${user.userId}" ></p>
                    <p class="voteNum" th:text="'票数:'+${user.voteNum}"></p>
                </div>
                </dt>
                <dd>
                    <button th:if="${user.button == 2}" class="habdle_btn" th:attr="data-id=${user.userId},data-number=${user.voteNum}" th:onclick="doVote(this)">投票</button>
                    <button th:if="${user.button == 1}" class="habdle_btn" disabled>投票</button>
                </dd>
            </dl>
        </div>

我们来解释下上述代码,从代码中我们可以看出,我们的点击事件是绑定在投票按钮上,而我们的票数是在<p class="voteNum" th:text="'票数:'+${user.voteNum}"></p>中,显然,我们在js方法中获取到当前button对象之后,无法直接去修改票数。
在下面的代码实现中,我们给出解决方案;

2.代码实现

function doVote(that) {
	//获取当前用户id
    var userId = $(that).attr('data-id');
    //获取当前票数＋1
    var number = parseInt($(that).attr('data-number')) + 1;
    $.ajax({
        url: [url],
        dataType: "json",
        type: "post",
        data: {
            userId: userId
        },
        success: function (resData) {
            if(resData){
                if ((resData.code * 1) == 0 ) {
                	//成功
                   //按钮失效
                    $(that).attr('disabled',true);
                    //重新设置票数
                    $(that).parents('.mineMsg').find('.voteNum').text('票数:'+ number )
                } else {
                    var errorMess = resData.msg;
                    if(!errorMess){
                        errorMess = "投票失败,请重试";
                    }
                    //展示错误信息
                    toast(errorMess);

                }
            }
        },
        error: function () {
        }
    });
}

我们来解释下上述代码,在页面的投票按钮上,我们需要自定义属性data-number=${user.voteNum},来存储当前用户的票数

 <button th:if="${user.button == 2}" class="habdle_btn" th:attr="data-id=${user.userId},data-number=${user.voteNum}" th:onclick="doVote(this)">投票</button>

在js方法中,我们获取到当前用户的票数自动加一,在后台响应成功以后,我们使用parents() 方法来遍历当前button的祖先元素,寻找有class = mineMsg 的元素,

这样我们就可以找到当前button的祖先元素:<dl th:each="user,iterStat : ${total}" class="mineMsg flex" ><dl>;由于<p class="voteNum" th:text="'票数:'+${user.voteNum}"></p> 是其内部标签,所以我们可以使用find()方法来找到票数对应的标签.

因此,就会有我们这句代码

  $(that).parents('.mineMsg').find('.voteNum').text('票数:'+ number )
  

四.总结

由于本人非前端工程师,有不对的地方还请大家指点,自我感觉大概意思说清楚了,希望对大家有所帮助;