javascript - jQuery 无法使用 .parent() 获取父元素

Question

我对 JavaScript 和 jQuery 还很陌生。

我正在编写一个网站，该网站使用 AJAX 将文件的评级更新到服务器。这个想法是，当我收到响应(即成功或失败)时，我应该更新表的一些值。但是，我遇到了很多麻烦，因为我似乎无法正确浏览 DOM。

我感兴趣的 HTML 片段是这样的:

<tr>
    <td><a href="some_url">some_name</a></td>
    <td>Yes</td>
    <td>Tag</td>
    <td>0</td>
    <td>0</td>

    <td><button value="UP" onClick="rate(this, 'some_key', 'upvote', 'some_url' );">
            <span class="glyphicon glyphicon-thumbs-up" style="font-size: 1.2em"></span>
        </button>
      <button value="DOWN" class="btn btn-default down_vote_button table-buttons" onClick="rate(this, 'some_key', 'downvote', 'some_url' );">
            <span class="glyphicon glyphicon-thumbs-down" style="font-size: 1.2em"></span>
        </button>
      </td>
</tr>

我的 jQuery 如下:

function rate(caller, key, action, action_url){
    $.ajax({
        type: "POST",
        url: action_url,
        dataType: 'json',
        data: JSON.stringify({"key": key, "action": action })
    })  
    .done(function( data ) { 
        if(action == 'upvote') {
            var upvotes = $(caller).parent("tr").eq(3).text();
            alert("upvoted: " + upvotes);
        } else if(action == 'downvote') {
            var downvotes = $(caller).parent("tr").eq(4).text();
            alert("downvoted: " + downvotes);
        }
    })  
    .fail(function( data ) { 
        alert( "File action '" + action + "' failed. Please try again later." );
    }); 
};  

我的想法是，如果服务器成功返回代码，那么我会传递对触发操作的按钮的引用(因此是rate(this,....)调用)，然后我应该得到该按钮的父级，最后是正确的索引，以便我可以获取其中的文本。然而，由于某种原因，我从未真正收到过文字。我尝试只获取按钮的父级，但也无法获取它。

请注意，该表应该有许多条目，并且可能会根据数据库中存储的内容而有所不同。

非常感谢您的帮助。

谢谢!

Answer 1

首先你的按钮没有parent('tr') ，它的父级是 <td> 。一个元素只有一个父元素，即它所包含的单个元素。

我怀疑你想要类似的东西:

var upvotes = $(caller).closest("tr").find('td').eq(3).text();

这会在树中查找最接近的 tr然后使用 find 在该行中查找找到td索引 = 3。

引用:closest() API Docs