从下一个 td [jQuery] 中选择隐藏的输入答案

【问题标题】：Select hidden input from within next td [jQuery]从下一个 td [jQuery] 中选择隐藏的输入
【发布时间】：2010-05-20 17:24:25
【问题描述】：

我有一张这样布置的桌子：

        <td>
                somename
        </td>
        <td class="hoverable value" >
                somevalue
        </td>
        <td class="changed">

        </td>
        <td class="original value">
            <input type="hidden" value="somevalue" />
        </td>

我想要做的是，我将鼠标悬停在可悬停的 td 上，这会将其变成一个文本框。一旦我将鼠标悬停在外面，我想检查隐藏字段的原始值，如果 2 彼此不同，则将图像放入更改中。我已经有了这个：

$(document).ready( function() {
    var newHTML = '';

    $('table td.hoverable').hover(
    function () {
        var oldHTML = $(this).html().trim();
        $(this).html('<input type=\'text\' value=\'' + oldHTML + '\' size=\'' + ((oldHTML).length + 2) +'\' />');
    },
    function() {
        newHTML = $('input', this).val();
        var oldHTML = $(this).next('td.original').children('hidden').val();
       if(newHTML != oldHTML) {
            $(this).next('td.changed').html('Changed');
        }
        $(this).html(newHTML);
    })
});

但它不起作用。显然失败的是获取隐藏字段的值，我尝试以几种不同的方式选择它，但就是无法做到。非常感谢任何想法或提示；）

【问题讨论】：

标签： javascript jquery html jquery-selectors hidden-field

【解决方案1】：

你需要使用 .nextAll()

var oldHTML = $(this).nextAll('td.original').find('input:hidden').val();

为什么？因为.next() 正在获取下一个元素并查看它是否与选择器匹配。如果你使用.nextAll()，你会得到下一个匹配选择器的元素。

【讨论】：

就像一个魅力！非常感谢！很高兴知道其中的区别。
jQuery 文档中说 .next() 正是以这种方式工作的，但不是以直观理解的方式。当我最近尝试做同样的事情时，这种行为让我很震惊。

【解决方案2】：

试试

$(this).next('td.original').find('input:hidden').val();

【讨论】：

不，它一直返回“未定义”
这可能没有帮助解决最初的问题，但它帮助我解决了语法问题。谢谢。

【解决方案3】：

var oldHTML = $(this).next('td.original').children(':hidden').val();

【讨论】：

【解决方案4】：

替换

var oldHTML = $(this).next('td.original').children('hidden').val();

有

var oldHTML = $(this).next('td.original').find('input:hidden').val();

【讨论】：