jQuery üst div değişen arka plan

Question

Ben benim html sayfalarından birinde şu pasajı:

<div class="inputboximage"> 
    <div class="value2"> 
    <input name='address1' value='Somewhere' type="text" size="26" maxlength="40" /> 
    <br /> 

    </div> 
</div> 

Benim sorunum address1 metin alanına tıklayın ve dönmek zamanı değiştirmek için inputboximage arka plan gerektiğidir Odağı kaybettiğinde orijinaline.

<script> 
    $(document).ready(function(){ 

    $("input").focus(function() { 
     $(this.parentNode).css('background-image', 'url(images/curvedinputblue.gif)'); 
    }); 

    $("input").blur(function() { 
    $(this.parentNode).css('background-image', 'url(images/curvedinput.gif)'); 
    }); 

    }); 
    </script> 

ancak bunun yerine görüntüyü değiştirme, bu beklediğiniz gibi deger2 div bir arka plan resmi ekleme gibi görünüyor:

aşağıdaki kullandık. Bu durumda parentNode.parentNode'u kullanabilirim, ancak inputboxImage düğümünün üst ağacın daha da yukarı veya aşağı olabileceği ihtimali de vardır.

Bu kodu değiştirebilmemin bir yolu var, böylece giriş ağacı olarak adlandırılan bir div bulana kadar üst ağaçta gezinecek ve görüntüyü değiştirecek mi?

Ayrıca, iki farklı div sınıfına sahipse, inputboximage ve inputboximageLarge, bu işlevi değiştirmenin bir yolu var, böylece her ikisiyle de çalışacak ve arka plan görüntüsünü her biri için farklı bir görüntü ile değiştirecek?

Answer 1

yerine $(this.parentNode) ait

$(this).parents('div.inputBoxImage').css(...) 

çalışmalıdır kullanarak düşünüyorum.

Bkz jQuery traversing documentation

Düzenleme:% 100 emin değilim ama neye ihtiyacınız düşünüyorum Prody yanıtını (velilere değiştirildi ebeveyn)

Answer 2

aşağıdaki güncellenmiş Phill Sacre cevabı parents kullanarak hariç önerdiklerini edilir jQuery API itibaren

(son s fark):

ebeveyn (Dize ifade) döndürür jQuery benzersiz paren içeren unsurların bir dizi alın Eşleşen elemanların ts.

ebeveynler (String expr), jQuery öğelerini döndürür Eşleşen öğe grubunun benzersiz atalarını içeren bir öğe kümesi (kök öğesi hariç).

Answer 3

HTML sadece kimlikleri benzersizdir çünkü Şimdi, başvurabileceğiniz div doğrudan herhangi geçişi yapmadan:

<div class="inputboximage" id="inputboximage"> 
    <div class="value2"> 
    <input name='address1'  value='5 The Laurels' type="text" size="26" maxlength="40" /> 
    <br /> 

    </div> 
</div> 

<script> 
    $(document).ready(function(){ 

    $("input").focus(function() { 
     $('#inputboximage').css('background-image', 'url(images/curvedinputblue.gif)'); 
    }); 


    }); 
</script> 

Not o tarz sınıfları Dor kullanarak, CSS sınıflandırılmasına yönelik ebeveyn elemanları filtrelemek mümkün iken davranış bir Bad Idea TM ve bunu yapmaktan kaçınmalısınız. Eğer gerçekten umutsuz Ama eğer bir deneyin verebilir.

$("input").focus(function() { 
     $(this).parents('div.inputboximage').css('background-image', 'url(images/curvedinputblue.gif)'); 
    }); 

Answer 4

.parent() css (burada değişiklikleri)