Как получить значение в родительском элементе? (JQuery) - PullRequest
Новая
       50

Как получить значение в родительском элементе? (JQuery)

1 голос
/ 03 апреля 2012

Как я могу получить значение в <tr cost="xx.xx">, если я нажму на какую-нибудь кнопку с id="minus" или id="plus"?

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

1 Ответ

3 голосов
/ 03 апреля 2012

Вы можете использовать метод 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, который не имеет повторяющихся идентификаторов: 

<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>​
​

Вот обновленная скрипка

...