JQuery Closest Class Select

Question

I have a layout as follows (simplified)

<div>
    <div class="msgOutput" id="msg2"></div>
    <form>
        <table>
            <tbody>
                <tr>
                    <td>
                        <p><input type="file" class="documentFile" id="documentFile2" /></p>
                    </td>
                </tr>
                ... more code here ...
            </tbody>
        </table>
    </form>
</div>

And I want to put something in the div.msgOutput when the input.documentFile changes (There are multiple copies on the page)

There is more code, so I do definitely need to search for the closest class="msgOutput"

I know it's something to do with closest() or parent() or something, but it's not working :/

So far I've tried things like:

$('.documentFile').change(function(e){
    ....
    $($(this).attr('id')).parent().children('.msgOutput').attr('id').append('Hello World');
    $(this).closest('div').find('.msgOutput').append('Hello World');
    $(this).closest('div').sibling('.msgOutput').append('Hello World');
    ....
});

But it's not working :(. Anyone have any ideas?

Answer 1

I would recommend something like this: http://jsfiddle.net/cr94dtk0/

You should put a class or id around the containing div, so that you can do some DOM Traversal

<div class="container">
<div class="msgOutput" id="msg2">hi</div>
<form>
    <table>
        <tbody>
            <tr>
                <td>
                    <p><input type="file" class="documentFile" id="documentFile2" /></p>
                </td>
            </tr>
        </tbody>
    </table>
</form>

  $(".documentFile").change(function(){
  $(this).closest(".container").find(".msgOutput").text("TEXT GOES HERE");
});

Answer 2

You've already found the closest div but you're adding extra selector methods which is screwing your result.

This works:

$(this).closest('div').append('Hello World');