如何使用jQuery在表格单元格中选择div答案

【问题标题】：How to select div in table cell using jQuery如何使用jQuery在表格单元格中选择div
【发布时间】：2010-12-07 16:54:30
【问题描述】：

我的表结构如下：

            <tr>
                <th><label for="ctl00_bodyContent_username">username:</label></th>
                <td class="field"><input name="ctl00$bodyContent$username" type="text" id="ctl00_bodyContent_username" /></td>
                <td class="info">
                    <div class="message">what do you want to be known as?</div>
                    <div class="valid">username available</div>
                    <div class="invalid">this username is already taken</div>
                </td>
            </tr>

我想要实现的是当文本框#ctl00_bodyContent_username 具有焦点时，相邻表格单元格中会显示 te div .message（默认为 display:none）。

【问题讨论】：

+1 表示问题和良好、可访问的 HTML！

标签： jquery html-table cell selector

【解决方案1】：

$("#ctl00_bodyContent_username").focus(function(){
  $(".message").show();
})

让我简单介绍一下Show()方法：

与没有动画的 show( speed, [callback] ) 相同。如果所选元素全部可见，则不会更改任何内容。 不管元素是通过 hide() 调用还是通过样式表中的 display:none 隐藏。

发件人：JQuery Effects

【讨论】：

-1 不幸的是，如果您有超过 1 行，这将不起作用。它将在所有行上显示消息。
好吧，它会起作用，除非你不添加超过一行具有相同名称的行，这就是这个人要问的:)
是的，对不起，伙计们。应该已经意识到只发布一行会导致问题。我有大约 5/6 的这些行具有相同的类。

【解决方案2】：

假设其中不止一个（而不是另一个假设的一个）：

$("td.field :input").focus(function() {
  var info = $(this).parent().next();
  if ($(".valid:visible, .invalid:visible", info).length == 0) {
    info.children("message").show();
  }
}).blur(function() {
  var info = $(this).parent().next();
  info.children("message").hide();
});

这还假设您想在字段失去焦点时隐藏消息。

【讨论】：

我也有这个想法，但是从内容来看，table好像是用户注册表
@Russ careers.*.com 使用每行都有一条消息的输入表单。我和 cletus 一起，他正在寻找这样的东西。
@cletus 你应该链接焦点和模糊调用，这样它们就不会加载选择器两次。
是的。完毕。不是真的出于性能原因。避免可能的拼写错误就足够了。
是否可以设置这个条件？你会注意到那里还有另外两个 div，有效的和无效的。如果有效和无效不可见，我只想显示消息 div。

【解决方案3】：

试试这个：

$("#ctl00_bodyContent_username").focus(function(){
  $(this).parent().next().children('.message').show();
})

在哪里

父母

获取元素的直接父级。如果在一组元素上调用，则 parent 返回一组其唯一的直接父元素。

下一个

获取一组元素，其中包含每个给定元素集的唯一下一个兄弟元素。

儿童

获取一组元素，其中包含每个匹配元素集的所有唯一直接子元素。

显示

显示每组匹配的元素（如果它们被隐藏）。

有关更多信息，请参阅 jQuery 文档中的 traversing。

【讨论】：