JQuery Ближайший класс Выбрать

Question

У меня есть макет следующим образом (упрощенный)

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

И я хочу, чтобы положить что-то в div.msgOutput когда input.documentFile изменения (Есть несколько копий на странице)

Там больше кода, так что я, безусловно, нужно искать ближайший class="msgOutput"

Я знаю, что это что-то делать с closest() или parent() или что-то, но это не работаю г:/

До сих пор я пытался что-то вроде:

$('.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'); 
    .... 
}); 

Но это не работает :(. У кого-нибудь есть идеи?

Answer 1

Я бы рекомендовал что-то вроде этого: http://jsfiddle.net/cr94dtk0/

Вы должны поместить класс или идентификатор вокруг контейнера DIV, так что вы можете сделать некоторые 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

Вы уже нашли ближайший div, но вы добавляете дополнительные методы выбора, которые прикручивают ваш результат.

Это работает:

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