Question

Here is my html:

    <table>
        <tbody><tr>
            <td>
                <label for="DocumentsName">Názov</label>
            </td>

            <td>
            <input name="DocumentsName" class="input documentsName" value="" style="width: 10em;" type="text">
            </td>
        </tr>
        <tr>
            <td>
                <label for="DocumentsDescription">Popis</label>
            </td>

            <td>
            <textarea name="DocumentsDescription" id="DocumentsDescription" cols="15" rows="4" class="input" style="width: 340px; font: 1em sans-serif;"></textarea>
            </td>
        </tr>
        <tr>
            <td>
                <label for="Document1">Doc 1</label>
            </td>

            <td>
            <input name="Document1" class="input document1" style="width: 10em;" type="file">
            </td>
        </tr>
    </tbody></table>
    <a href="#" id="addDocumentFileInput">+++++</a>

I am trying to get the litest input with type=”file” from the table upon clicking the #addDocumentFileInput link.

This returns null. Why?

    <script type="text/javascript">
    $(document).ready(function() {

        $("#addDocumentFileInput").click(function() {
            var $lastFileInput = $(this).prev().children("tr").last().children("input");
            alert($lastFileInput.html());
            return false;
        });

    });
    </script>   

Answer 1

Because prev() gives you the table element and it has no tr children, only one tbody child. A row has no input children either, only td children.

children only searches for elements one level below.

Use find instead:

$(this).prev().find('input[type="file"]').last()
// or fancy: find('input:file:last')