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." );
    }); 
};

我认为如果从服务器获得成功的返回代码，那么我传递一个对触发动作的按钮的引用（因此速率（this，....）调用）然后我应该得到该按钮的父级，最后是正确的索引，以便我可以在里面获取文本。但是，出于某种原因，我从未真正得到过该文本。我试着只得到按钮的父母，我也无法得到它。

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

非常感谢帮助。

谢谢！

Answer 1

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

我怀疑你想要这样的东西：

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

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

参考： closest() API Docs

Answer 2

parent()只查找一个级别。如果要查找最接近的父级（不一定是直接父级），请使用closest()

jQuery无法使用.parent（）获取父元素

2 个答案: