javascript - jQuery - Why :first and :last work but not :nth-child(2) in my code? - Stack Overflow

admin管理员组

文章数量:1356294

Please consider the following html snippet and its corresponding code with jQuery version 1.3.2:

<tr>
    <td>id</td>
    <td><input type='checkbox' /></td>
    <td><input type='checkbox' /></td>
    <td><input type='checkbox' /></td>
    <td><select>
    <option value='0'>0</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
</select></td>
</tr>

jQuery function:

function submitRoutesForm()
{
    data = new Array();
    $('#routes_table option:selected').each(function()
    {
        qty = $(this).val();
        if( qty != 0)
        {
            tmp = new Array();
            tr = $(this).closest('tr');
            tmp['route_id'] = tr.find('td:first').html();
            tmp['qty'] = qty;
            tmp['isChild'] = $(tr).find('td input:first').is(':checked');
            tmp['isInvalid'] = $(tr).find('td input:nth-child(2)').is(':checked');
            tmp['isSpecialDiet'] = $(tr).find('td input:last').is(':checked');
            data.push(tmp);
            console.log(tmp);
        }
    });

return false;

}

I could confirm that everything works expect the result for the second checkbox is always returning "false". It seems my selector :nth-child(2) doesn't work for some reason...

Many thanks in advance, I am stuck with this for a while :(

Please consider the following html snippet and its corresponding code with jQuery version 1.3.2:

<tr>
    <td>id</td>
    <td><input type='checkbox' /></td>
    <td><input type='checkbox' /></td>
    <td><input type='checkbox' /></td>
    <td><select>
    <option value='0'>0</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
</select></td>
</tr>

jQuery function:

function submitRoutesForm()
{
    data = new Array();
    $('#routes_table option:selected').each(function()
    {
        qty = $(this).val();
        if( qty != 0)
        {
            tmp = new Array();
            tr = $(this).closest('tr');
            tmp['route_id'] = tr.find('td:first').html();
            tmp['qty'] = qty;
            tmp['isChild'] = $(tr).find('td input:first').is(':checked');
            tmp['isInvalid'] = $(tr).find('td input:nth-child(2)').is(':checked');
            tmp['isSpecialDiet'] = $(tr).find('td input:last').is(':checked');
            data.push(tmp);
            console.log(tmp);
        }
    });

return false;

}

I could confirm that everything works expect the result for the second checkbox is always returning "false". It seems my selector :nth-child(2) doesn't work for some reason...

Many thanks in advance, I am stuck with this for a while :(

• javascript
• jquery
• jquery-selectors

Share Improve this question Follow asked Apr 14, 2011 at 13:18 Michael MaoMichael Mao 10.2k2323 gold badges7878 silver badges9292 bronze badges 2

• 3 You variable "tmp" is not really being used as an array, so you should declare it as var tmp = { }; - and don't forget to declare all your local variables with the var keyword!!! – Pointy Commented Apr 14, 2011 at 13:23
• 1 Might be better to add value= attributes to the inputs in the html instead of relying on the code count elements and assign values. – wdm Commented Apr 14, 2011 at 13:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You don't have a td with more than one input, so nth-child(2) won't find anything.

nth-child would be looking for a child of the td element and each one only has 1 child. You should use :eq(2) on the td. That will give you the index of the matching result set instead of a certain child.

$(tr).find('td input:eq(2)').is(':checked');

本文标签： javascriptjQueryWhy first and last work but not nthchild(2) in my codeStack Overflow