Question

所以我需要遍历动态数量的表行。每行有3个单元格。在单元格2和3中，我有一个选择框，我需要从中检索值。

我尝试了以下不同的代码组合，但都返回undefined：

$('tbody#mapping_table > tr').each(function(i, obj){

// These are alternatives I've tried within the loop:

     console.log($(obj).children('td:nth-child(2)').children('select > option:selected').val());

// ---- OR ----

     console.log($(obj).children('td:nth-child(2)').children('option:selected').val());

// ---- OR ----

     console.log($(this).children('td:nth-child(2)').children('option:selected').val()); 

// ---- OR ----

     console.log($(this).children('td:nth-child(2) > select > option:selected').val());

// ---- OR ----

     console.log($('td:nth-child(2) > select > option:selected', $(this)).val());

});

所有替代方案都会返回undefined。这将是我的html示例：

<tbody id="mapping_table">
    <tr>
        <td>Some Value 1</td>
        <td>
            <select name="xml_field[some_value_1]">
                 <option value="1">Select value 1</option>
                 <option value="2">Select value 2</option> 
            </select>
        </td>
        <td>
            <select name="join_field[some_value_1]">
                <option value="1">Join select value 1</option>
                <option value="2">Join select value 2</option> 
            </select>
        </td>
    </tr>
</tbody>

我只需要遍历每个tr并从每个{2}中检索2个选定的值。关于我接下来应该尝试什么的任何想法？

由于

Answer 1

$('button').on('click', function () {
    $('tbody#mapping_table > tr').each(function (i, obj) {
        console.log($(obj).children('td:nth-child(2)').find('select option:selected').val());
    });
});

这可以起作用，因为发现可以一直向下移动而不是仅在http://api.jquery.com/children/以下1级的儿童

演示：http://jsfiddle.net/ytft9aLd/

Answer 2

对于每个tr，您可以在第二个和第三个select内找到td并以这种方式获取此select的选定值：

Fiddle

$('tbody#mapping_table > tr').each(function()
{
    var firstValue = $(this).find('td:nth-child(2) select').val();
    var secondValue = $(this).find('td:nth-child(3) select').val();
});

关于您的尝试：

$(obj).children('td:nth-child(2)').children('select > option:selected').val();

由于children('select > option:selected')，

不正确：.children()在DOM中只降低了一级。

$(obj).children('td:nth-child(2)').children('option:selected').val();

有同样的问题。

$(this).children('td:nth-child(2)').children('option:selected').val();

this等于obj内的.each()，因此它与第二次尝试相同。

$(this).children('td:nth-child(2) > select > option:selected').val();

与children存在同样的问题。

$('td:nth-child(2) > select > option:selected', $(this)).val();

实际上应该正常工作。

Jquery遍历TR并获取子选项

2 个答案: