jquery - 用jquery的closest()遍历td/tr

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);
});