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 codeaddImageEvent = jQuery(this).prevAll("input[type=text]:first")
Is using prevAll
a bad choice?
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.
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.
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.
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.
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.
.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);
});
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;
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With