无法使用 jQuery 在 html 表中获取兄弟值答案

【问题标题】：Can't get the siblings value within a html table with jQuery无法使用 jQuery 在 html 表中获取兄弟值
【发布时间】：2012-10-31 04:40:03
【问题描述】：

我有一张 5 x 5 的桌子。每个单元格都是一个 asp.net 文本框。我想用非空文本框获取最后一行的 5 个文本框值。例如：

这应该得到你好，我的朋友

但我得到了所有值，但最后一个 (ND)。我不知道为什么。这是我的代码：

// RIGHT HERE, $(this) referes to the whole table
$(this).find('input[value!=""]')
        // I get the last edited textbox
        .last()
        // Go up to the parent <td>
        .parent('td')
        .siblings('td')
        // I get all my brothers of type input 
        .children(':input')
        .each(function () {
            alert($(this).val());
        });

我做错了什么，但是什么？谢谢。

【问题讨论】：

标签： javascript jquery html-table siblings

【解决方案1】：

问题在于当您调用 .siblings() 时 - 它会返回与您当前选择的 <td> 元素具有相同父级的所有 other <td> 元素。可以通过遍历 DOM 中的另一个步骤然后选择子级来解决该问题，如 @Adrian、@Quintin Robinson、@Sushanth -- 和 @wirey 所示。

我想我会发布一个答案，以便您得到解释，因为所有其他答案都解决了您的问题，但没有解释问题所在。现在这就是我将如何更改您的代码:)

$(this).find('input[value!=""]:last')
    .parents('tr')
    .find('td input')
    .each(function () {
        alert($(this).val());
    });

【讨论】：

【解决方案2】：

您应该使用parents() 并搜索tr，然后搜索其中的所有input：

$(this).find('input[value!=""]')
       .last()
       .parents('tr')
       .find('input')
       .each(function () {
           alert($(this).val());
        });

【讨论】：

【解决方案3】：

你可以使用这样的东西..

$(this).find('input[value!=""]:last')
       .parents("tr:first")
       .find(":text")
       .each(...);

【讨论】：

【解决方案4】：

你应该这样做

$(this).find('tr').filter(function() { // find all trs
    // returns the row if all inputs are filled  
    return $(this).find('input').filter(function() {
        return $(this).val().length > 0
    }).length == 5; // check to make sure row has 5 unempty textboxes
}).last() // get the last tr returned with no empty textboxes
.find('input').each(function() { // find inputs
    console.log($(this).val());
});

http://jsfiddle.net/E5hnA/

你的问题在于你没有按行过滤..而是找到最后一个非空文本框..然后从那里开始遍历

$(this).find('input[value!=""]')  // find all inputs that are not empty
    .last() // get the last one

那么当最后一行有一个非空文本框的输入时会发生什么？这就是你得到的行。我在示例中所做的是。

查找所有行 > 过滤 - 返回已填充所有输入的行 > 获取返回集合中的最后一个 > 然后执行任何操作 - 因为现在您拥有填充所有输入的最后一行

【讨论】：

【解决方案5】：

试试这个

$(this).find('input[value!=""]')

        .closest('tr')
        .prev('tr')
        .children(':input')
        .each(function () {
            alert($(this).val());
        });

【讨论】：