jQuery - search for previous selector relative to current

Question

I have a form with 3 sections in it. Each section has a dedicated div for fairly long contextual help messages regarding the input that has focus.

My question is, if I give each of these help divs a class of "form-tip" and each input that has a tip the class "has-tip", how can I get the tip to always show up in the previous "form-tip" div?

Something like:

$('.has-tip').each(focus(function() {
    var tip = $(this).attr('title');
    // Find most recent $('.form-tip') in the DOM and populate it with tip
}));

I hope that makes sense... Thanks for any help.

Answer 1

var container = $(this).closest('.form-tip')

within the .each if I understood properly.

Answer 2

If the .has-tip is a child of .form-tip then you can use .closest() like this:

$('.has-tip').each(focus(function() {
    var tip = $(this).attr('title');
    var ft = $(this).closest('.form-tip');
    // Find most recent $('.form-tip') in the DOM and populate it with tip
}));

If it's a sibling, you can use .prev('.form-tip') or if it's not immediately before, then it's .prevAll('.form-tip: first').