JQuery how to find the top element of an image

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 got the image element, but Im sure this is not good.

Any clue if there is a better way?

Answer 1

Usually I would do this: You can add / generate an id to the img element and add a link to in to the data attribute in btn or any other item that should reference it. This is easy even when 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 }); 

Answer 2

There are various ways to do this,

One way is to find the div container in your case that contains the corresponding 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 about how it might be better,

• .siblings() : If you link to the documentation here https://api.jquery.com/siblings/ , this method matches all specified selector and creates new elements. This method should be used for me only when you go to the manipulate element, for example, changing css and properties. Inside, of course, this can cause find to run to match / get the item.

• .closest() : This https://api.jquery.com/closest/ will be better in your case compared to .sibilings() . It will not create a new element and will only find the necessary element that you are trying to search in the DOM.

Answer 3

You can always use Event Delegation to access the related element and its descendants that match the selector. The following is an example of a delegated event that allows me to customize various elements from an event object using 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 fires an event or other jQuery.trigger () JavaScript calls, jQuery passes a handler to the Event object, which it can use to parse and change the status of the event. This object is a normalized subset of the data provided by the browser; The browser unmodified native event object is available in event.originalEvent. For example, event.type contains the name of the event (for example, "resizing") and event.target indicates the deepest (innermost) element where the event occurred.

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