jQuery how to find image upper element

Question

I have the following HTML:

<div class="uploadimage" >
    <img src="test.png"  />
    <div class="form-inline" >
        <button type="button" class="fileupload"> <i class="fa fa-folder-open"></i>
            <input type="file" class="upload">
        </button>
        <button type="button" class="btnupload"> <i class="fa fa-cloud-upload"></i> </button>
    </div>
</div>

in jQuery I have the following code:

 $(".fileupload input").change(function () {
            var input = this;

            // this works but I think there is a better way
            var image = $(this).closest('.form-inline').siblings('img');


        });

I already get the image element but Im sure the peformance of that is no good.

Any clue if there is a better way?

Answer 1

There are various ways you could do this,

One of the way is to find the container div in your case which contains relevant img

$(".fileupload input").change(function () {
       // this works but I think there is a better way
       var image = $(this).closest('.uploadimage').find('img');
});

For your concern of which way could be better,

1. .siblings() : If you refer the documentation here https://api.jquery.com/siblings/ , this method matches all the specified selector and creates a new elements. This method should be used according to me only when you are going to manipulate an element, like changing css and properties. Internally, ofcourse it might be triggering find to match / get the element.

2. .closest() : This https://api.jquery.com/closest/ will be better in your case as compare to .sibilings(). It will not create a new element also will find only required element you are trying to search in the DOM.

Answer 2

You could always use Event Delegation to access both the bound element and it's descendants that match the selector. Here is an example of a delegated event that allows me to target different elements from the event object with jQuery.on().

 $('.uploadimage').on('change', 'input', function(event) {
   console.log(event);
   var input = $(event.currentTarget);
   console.log(input);
   var input = $(event.target);
   console.log(input);
   var image = $(event.delegateTarget).find('img');
   console.log(image);
   var image = $(event.delegateTarget.firstElementChild);
   console.log(image);
 }).find('input').change();

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="uploadimage" >
  <img src="test.png"  />
  <div class="form-inline" >
    <button type="button" class="fileupload"> <i class="fa fa-folder-open"></i>
    <input type="file" class="upload">
    </button>
    <button type="button" class="btnupload"> <i class="fa fa-cloud-upload"></i> </button>
  </div>
</div>

When the browser triggers an event or other JavaScript calls jQuery's .trigger() method, jQuery passes the handler an Event object it can use to analyze and change the status of the event. This object is a normalized subset of data provided by the browser; the browser's unmodified native event object is available in event.originalEvent. For example, event.type contains the event name (e.g., "resize") and event.target indicates the deepest (innermost) element where the event occurred.

When jQuery calls a handler, the this keyword is a reference to the element where the event is being delivered; for directly bound events this is the element where the event was attached and for delegated events this is an element matching selector. (Note that this may not be equal to event.target if the event has bubbled from a descendant element.) To create a jQuery object from the element so that it can be used with jQuery methods, use $( this ).

Answer 3

I would usually do like this: You can add/generate id to the img element, and add a reference to in in the a data attribute of the btn or any other item what has to refer to it. This is easy even if generating these elements in a loop.

HTML

<div class="uploadimage" >
    <img id="testimg1" src="test.png"  />
    <div class="form-inline" >
        <button type="button" class="fileupload" data-imgitem="testimg1"> <i class="fa fa-folder-open"></i>
            <input type="file" class="upload">
        </button>
        <button type="button" class="btnupload"> <i class="fa fa-cloud-upload"></i> </button>
    </div>
</div>

JS

$(".fileupload input").change(function () {
    var input = this
    var reference = $(this).data(imgitem); // get id
    var image = $('#' + reference); // get DOM element by id
});