jquery - 如何获取父元素的值？ (JQuery)

Question

我怎样才能获得 <tr cost="xx.xx"> 的值(value)？如果我点击 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