如何获得父元素的价值？ （JQuery的）

Question

如果点击带有<tr cost="xx.xx">或id="minus"的某个按钮，我如何才能获得id="plus"的价值？

http://jsfiddle.net/YD9uB/3/

Answer 1

您可以使用closest()方法。

var cost = $("#minus").closest("tr").attr("cost");

但是，你真的不应该使用非标准的html属性。您可以改为使用数据属性：

<table>
  <tr data-cost="xx.xx">
    <td>
    <input type="submit" id="minus"/>
    </td>
  </tr>
</table>

然后使用data()方法访问它们。

var data = $("#minus").closest("tr").data();
var cost = data.cost;

<强>更新

这里是一个点击处理程序：

$(document).ready(function() {
    $(".plus, .minus").click(function() {
        var data = $(this).closest("tr").data();
        var cost = data.cost;
        alert(cost);
    });
});

使用以下更新的html，它没有重复的ID：

<form>
    <table>
    <tbody>
        <tr>
            <th></th>
            <th>name</th>
            <th>quantity</th>
            <th>cost</th>
        </tr>
        <tr data-cost="50.00">
            <td></td>
            <td>Some Name A</td>
            <td>
                <img class="minus button" align="LEFT" src="./img/minus.png" alt="-">
                <input type="text" value="20" name="quantity">
                <img class="plus button" align="RIGHT" src="./img/plus.png" alt="+">
            </td>
            <td></td>
        </tr>
        <tr data-cost="80.00">
            <td></td>
            <td>Some Name B</td>
            <td>
                <img class="minus button" align="LEFT" src="./img/minus.png" alt="-">
                <input type="text" value="10" name="quantity">
                <img class="plus button" align="RIGHT" src="./img/plus.png" alt="+">
            </td>
            <td></td>
        </tr>
    </tbody>
    </table>
</form>​
​

Here's the updated fiddle