jQuery的不工作的表

Question

嗨內設置一個兄弟TD文本，我有以下表中的數據：

<tr> 
    <td><input type="text" data-usage="payment" /></td> 
    <td><input type="text" data-usage="payment" /></td> 
    <td data-usage="amount"></td> 
</tr> 

然後我試圖使它所以當用戶離開與數據使用一個文本框=」付款「的td與數據使用=」金額「其文本設置爲」信息「。我寫道：

<script type="text/javascript"> 
    $(document).ready(function() { 

     $("input[data-usage='payment']").blur(function() { 

      $(this).closest("td[data-usage='amount']").text("info"); 
     }); 

    }); 
</script> 

我不明白爲什麼，但這並不起作用。這個事件被解僱了，它似乎找到了td，但文本甚至沒有設置。

有誰能告訴我爲什麼？有沒有更好的方法來解決這個問題？

Answer 1

closest()只在元素的父母搜索，你正在尋找最接近的TR，然後用數據屬性的TD：

$("input[data-usage='payment']").blur(function() { 
    $(this).closest("tr").find("td[data-usage='amount']").text("info"); 
}); 

Answer 2

的[data-usage='amount'] TD是不是目標輸入的父元件，它實際上是在td的同級包含目標輸入

$(document).ready(function() { 
    $("input[data-usage='payment']").blur(function() { 
     $(this).closest("td").siblings("[data-usage='amount']").text("info"); 
    }); 
}); 

演示：Fiddle

Answer 3

這裏是完整的例子：

$("input[data-usage='payment']").blur(function() { 
     $(this).closest("tr").find("td[data-usage='amount']").text("info"); 
    }); 

這裏是例子：example