遍歷TD/TR與jQuery的最接近（）

Question

<td width="162"><span class="required">*</span> Name:</td> 
<td width="407"> 
    <label> 
     <input id="store_name" class="text_field alnum" type="text" minlength="3" 
     maxlength="30" size="40" name="store_name" style="color: rgb(51, 51, 51);"/> 
    </label> 
</td> 
<td class="char_count_area" style="color: green;"/> 

我有一些jQuery的代碼是這樣的：

$('.text_field').each(function(){ 
     $(this).keyup(function(){     
      $(this).parent().parent().parent().find('.char_count_area').html(remainingChars); 
.... 

正如你所看到的，我想在一個相當低效從text_field達到char_count_area方式。 它可以工作，但如果我稍微改變桌子的設計就會變得很瘋狂。 我使用

$(this).closest('.char_count_area').html(remainingChars) 

嘗試，但它不工作（字符不會出現）。

如何使用closest實現此目的？

Answer 1

我已經整理了一下你的代碼（刪除了each()，因爲它不是必需的，並且更好地限定了你的選擇器，只使用CSS類並不是最佳實踐，指定元素名稱也會更高效）。

$('input.text_field').keyup(function(){         
    $(this).closest('td').next().html(remainingChars); 
}); 

，一定要記住closest()在jQuery的1.3，增加所以如果你使用jQuery的是舊版本，那麼你可能想使用

$('input.text_field').keyup(function(){         
    $(this).parent().parent().next().html(remainingChars); 
}); 

這將是罰款，只要所述<input>保持在元件在<td>，並且下一個<td>是具有CSS類char_count_area

編輯：

在回答您的意見，這裏有一個更好的解決方案，很少依賴DOM定位

('input.text_field').keyup(function(){         
    $(this).parents('tr:first').find('td.char_count_area').html(remainingChars); 
});