title: jQuery - on button click, emulate input[type="file"].change only in parent element
body: <p>I am not sure if title says what correctly I am trying to do but I don't know how to name that problem.</p>
  
  <p>I am trying to add some style to input[type="file"] element using css and jquery. Here is my code:</p>
  
  <pre><code>&lt;div class="input-file"&gt;
      &lt;input type="file"&gt;&lt;label&gt;Select file...&lt;/label&gt;&lt;button type="button"&gt;...&lt;/button&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>where INPUT has display: none style so it's not visible.</p>
  
  <p>Javascript:</p>
  
  <pre><code>$('.input-file &gt; button').live('click',function() {
  $('input[type="file"]').click(); });
  </code></pre>
  
  <p>It works good if only 1 element is on page but if there are for example 3, whenever I click on button 1, it will fire function 3 times. I would like it to respond only for it's parent element which is <code>&lt;div class="input-file"&gt;</code> </p>
  
  <p>How could I use .parent or .before or whatever function can work to achieve this?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>@Chandu has a great solution. </p>
  
  <p>Also, another alternative would be $(this).prev().prev().click(); if elements are static and always in the same position.</p>
  
  <p>Thank you @Chandu.</p>