Jquery cambiar fondo de div padre

Question

tengo el siguiente fragmento en una de mis páginas html:

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

    </div> 
</div> 

Mi problema es que necesito el fondo inputboximage a cambiar cuando haga clic en el campo de texto dirección1 y revertir al original cuando pierde el foco.

He utilizado el siguiente:

<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> 

pero en lugar de reemplazar la imagen, que parece ser la adición de una imagen de fondo a la div valor2 como era de esperar. Puedo usar parentNode.parentNode en este caso, pero también existe la posibilidad de que el nodo inputboxImage pueda estar más arriba o más abajo en el árbol padre.

¿Hay alguna manera de que pueda cambiar este código para que navegue por el árbol padre hasta que encuentre un div llamado inputboximage y reemplace la imagen allí?

Además, si tengo dos clases div diferentes, inputboximage y inputboximageGarge, ¿hay alguna manera de modificar esta función para que funcione con ambas, reemplazando la imagen de fondo con una imagen diferente para cada una?

Answer 1

creo usando

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

en lugar de $(this.parentNode) debería funcionar.

Véase el jQuery traversing documentation

Editar: actualicen de acuerdo con la respuesta de Prody (cambiado los padres a los padres)

Answer 2

no estoy 100% seguro pero creo que lo que necesita es lo que la respuesta de Phill Sacre sugiere excepto usando parents (nótese la última s)

de API jQuery:

padres (String expr) devuelve jQuery Obtener un conjunto de elementos que contienen las únicas paren ts del conjunto combinado de elementos.

parents (String expr) devuelve jQuery Obtiene un conjunto de elementos que contienen los antecesores únicos del conjunto de elementos coincidentes (excepto para el elemento raíz).

Answer 3

Ahora bien, como en HTML sólo identificadores son únicos, puede hacer referencia el div directamente sin hacer ningún recorrido:

<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> 

Tenga en cuenta que si bien es posible filtrar los elementos primarios para classing CSS, utilizando las clases de estilos Dor el comportamiento es un Bad Idea TM y deberías evitar hacerlo. Pero si usted está realmente desesperada, puede darle una oportunidad:.

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

Answer 4

.parent() CSS (cambios aquí)