Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I find closest element with jQuery

Tags:

jquery

I have the following HTML code:

<td>
  <input type="text" size="40" value="" name="related_image" id="related_image">  
  <input type="button" class="button addImage" value="Get image url">
</td>
<td>
  <input type="text" size="40" value="" name="alternative_image" id="alternative_image">  
  <input type="button" class="button addImage" value="Get image url">
</td>

I need to figure out which button I click, then add some text to the nearest input text field.
E.g. if I click the button in the first <td>, then I need to input some text into related_image text field.

I've tried with the followin jQuery, but it's not working:

jQuery('.addImage').click(function() {
  var tmp = jQuery(this).closest("input[type=text]").attr('name');
  alert(tmp);
});

(I'm just retrieving the inputs name for testing.)

I think I might have to use find and / or siblings. But I'm not quite sure how.

Any help appreciated.

EDIT

I just managed to use this code
addImageEvent = jQuery(this).prevAll("input[type=text]:first")

Is using prevAll a bad choice?

like image 558
Steven Avatar asked Sep 02 '10 00:09

Steven


People also ask

How do I get the closest div using jQuery?

The closest() method returns the first ancestor of the selected element. An ancestor is a parent, grandparent, great-grandparent, and so on. The DOM tree: This method traverse upwards from the current element, all the way up to the document's root element (<html>), to find the first ancestor of DOM elements.

How does closest work in jQuery?

The closest( selector ) method works by first looking at the current element to see if it matches the specified expression, if so it just returns the element itself. If it doesn't match then it will continue to traverse up the document, parent by parent, until an element is found that matches the specified expression.

How do I find the closest element?

HTML DOM Element closest() MethodThe closest() method searches up the DOM tree for elements which matches a specified CSS selector. The closest() method starts at the element itself, then the anchestors (parent, grandparent, ...) until a match is found. The closest() method returns null() if no match is found.

Is closest JavaScript or jQuery?

The closest() is an inbuilt method in jQuery that returns the first ancestor of the selected element in the DOM tree. This method traverse upwards from the current element in the search of first ancestor of the element.


3 Answers

Try:

var tmp = $(this).siblings(":text").attr("name");

The closest() method you're using finds the closest ancestor, which is not what you want here.

like image 71
cletus Avatar answered Nov 10 '22 22:11

cletus


.closest() finds a parent, in this case you need .siblings(), like this:

jQuery('.addImage').click(function() {
  var tmp = jQuery(this).siblings("input[type=text]").attr('name');
  alert(tmp);
});

Or if the format is always consistent like your example, just use .prev(), like this:

jQuery('.addImage').click(function() {
  var tmp = jQuery(this).prev().attr('name');
  alert(tmp);
});
like image 29
Nick Craver Avatar answered Nov 10 '22 22:11

Nick Craver


Here is a 'closest' implementation that aims at descendants instead of parents:

$.fn.nearest = function(selector) {
    var nearest, node = this, distance = 10000;
    node.find(selector).each(function(){
        var n = $(this),
            d = n.parentsUntil(node).size();
        if (d < distance) {
            distance = d;
            nearest = n;
        } else if (d == distance) {
            nearest.add(this);
        }
    });
    return nearest;
};
like image 34
Nathan Bubna Avatar answered Nov 10 '22 21:11

Nathan Bubna