just had to fight with the problem of selecting a preceding element in JQuery. JQuery comes already with the prev() and prevAll() selectors that select the previous elements if they are direct siblings. My problem was now that I had following structure.

<form> <input /> <span> <input id=”2” value=”Ineed2know” /> </span> <input id=”3” /> </form>

Now my problem was, that I needed the value of input#2 beeing on input#3. So it would have been the preceding input, except that it was nested inside a span. So prev() and prevAll() won’t work.

What I really wanted is the XPath’s :preceding selector. So I came up with this extension:

// find a preceding element inside a parent element, omitting the dom structure
jQuery.fn.preceding = function(parentSelector, elementTypeSelector) {
   var inputs = this.closest(parentSelector).find(elementTypeSelector);
   return $(inputs[inputs.index(this)-1]);
};

so what you do is to pass in a selector that selects one of the parent elements, up to you and then the selector for the JQuery.find().

in aboves example it would look like this:

$(this).preceding('form', 'input').val();

Of course you can have more specialized selectors like “input.className”

here the snippet for ‘following’

 // find a following element inside a parent element, omitting the dom structure
jQuery.fn.following = function(parentSelector, elementTypeSelector) {
   var inputs = this.closest(parentSelector).find(elementTypeSelector);
   return $(inputs[inputs.index(this)-1]);
};