jquery - フォーム input:focus のスタイル祖先要素 (jQuery)

Question

DIV、3 つの INPUTS を含むフォームがあり、各 INPUT は LABEL 要素内にあります。各INPUTに着目したときのDIV要素の背景画像を変更したいと考えています。

CSS でこれを修正するために DOM に戻ることができないので、誰かが数行の jQuery を提案してくれませんか?

ありがとう

Answer 1

$('div input').focus(function(){
    $(this).parents('div:eq(0)').addClass('specialCSSclass');
}).blur(function(){
    $(this).parents('div:eq(0)').removeClass('specialCSSclass');
});

CSS でクラスを作成し、「specialCSSclass」をそれに置き換える必要があります。

Answer 2

$('input').focus(function(){
    $(this).parent().parent().addClass('highlight');
}).blur(function(){
     $(this).parent().parent().removeClass('highlight');
});

Answer 3

jQuery closest もオプションです。

closest( selector )
    .closest( selector )
    .closest( selector, [ context ] )
closest( selectors, [ context ] )
    .closest( selectors, [ context ] )

説明によると..セレクターに一致する最初の祖先要素を取得します。現在の要素から始まり、DOM ツリーを上に向かって進みます。

http://api.jquery.com/closest/