javascript - 无法使用 jQuery 获取 html 表中的兄弟姐妹值

Question

我有一张 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());
        });

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

Answer 1

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

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

Answer 2

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

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

Answer 3

你应该做这样的事情

$(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

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

查找所有行 > 过滤 - 返回填充了所有输入的行 > 获取返回集合中的最后一个 > 然后做任何事情 - 因为现在你有最后一行填充了所有输入

Answer 4

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

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

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

Answer 5

试试这个

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

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