Add class to group specific div on focus with jQuery

Question

In the following code, I'm trying to make it so that when an input is selected (focused), that the formhead div in the associated fieldset changes its background color, and on blur it changes back. I would like to do this by adding a class to that same div on focus, and having that class removed on blur. jQuery closest is the most similar in concept to what I'm trying to do, but isn't appropriate because it will only target parent divs. Is there something else that would target the nearest div with that class, without affecting the other classes in the other fieldsets? Or do I have to get much more specific and id the formheads, etc?

<fieldset>
<div class="formhead">Heading Title 1</div>
<div class="fieldleft">
    <label for="specificinput">Input Title</label>
    <input type="text" class="forminput" id="specificinput">
</div>
<div class="fieldleft">
    <label for="specificinput">Input Title</label>
    <input type="text" class="forminput" id="specificinput">
</div>
</div>
</fieldset>

<fieldset>
<div class="formhead">Heading Title 2</div>
<div class="fieldleft">
    <label for="specificinput">Input Title</label>
    <input type="text" class="forminput" id="specificinput">
</div>
<div class="fieldleft">
    <label for="specificinput">Input Title</label>
    <input type="text" class="forminput" id="specificinput">
</div>
</div>
</fieldset>

And the jQuery:

<script type="text/javascript"> 
$(document).ready(function() {
    $('input').focus(function( ){
    $(this).closest('.formhead').addClass('bluebg');
  });
    $('input').focus(function( ){
    $(this).closest('.formhead').removeClass('bluebg');
  });
});
</script>

kapa · Accepted Answer · 2011-05-30T12:19:57.287

You can get the input's .formhead with this line:

$(this).closest('fieldset').find('.formhead').addClass('bluebg');

You can also write this as (actually the same, using context):

$('.formhead', $(this).closest('fieldset')).addClass('bluebg');

The easiest way I see for your code would be something like:

$('input.forminput').bind('focus blur', function () {
    $(this).closest('fieldset').find('.formhead').toggleClass('bluebg');
});

jsFiddle Demo

This will assign the same handler for onfocus and onblur, which will just toggle the class of .formhead.

Thanks, just what I am looking for. – bard Nov 17 '15 at 10:03 — bard, Nov 17 '15 at 10:03

Frédéric Hamidi · Answer 2 · 2011-05-30T12:38:00.793

1

You can also match the parent <div> element with class fieldleft using closest(), then proceed to its formhead sibling using prevAll():

$(document).ready(function() {
    $("input:text").bind("focus blur", function() {
        $(this).closest(".fieldleft").prevAll(".formhead").toggleClass("bluebg");
    });
});

edited May 30 '11 at 12:38

answered May 30 '11 at 12:10

Frédéric Hamidi

258,201
41
486
479

This only seems to work on the input field just following the formhead div. Any inputs below that are unable to target it, probably due to limitations of prev – hisnameisjimmy May 30 '11 at 12:33
@hisnameisjimmy, you're absolutely right, `prevAll()` must be used here. Answer updated accordingly, thanks for the heads-up :) – Frédéric Hamidi May 30 '11 at 12:37

score -1 · Answer 3 · answered May 30 '11 at 12:09

-1

you can use .next()

answered May 30 '11 at 12:09

Vivek

10,978
14
48
66

How would `.next()` help here? – kapa May 30 '11 at 12:43

Add class to group specific div on focus with jQuery

3 Answers3