JQuery wechselnden Hintergrund der Eltern div

Question

Ich habe folgende Schnipsel in einem meiner HTML-Seiten:

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

    </div> 
</div> 

Mein Problem ist, dass ich die inputboximage Hintergrund ändern müssen, wenn ich im address1 Textfeld klicken und zurückkehren zum Original, wenn es den Fokus verliert.

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

aber anstatt sie zu ersetzen, das Bild, so scheint es, ein Hintergrundbild auf dem Wert2 div werden, indem wie man erwarten würde:

Ich habe folgendes verwendet. Ich kann parentNode.parentNode in diesem Fall verwenden, aber es besteht auch die Möglichkeit, dass der inputBoxImage-Knoten weiter oben oder unten in der übergeordneten Struktur sein könnte.

Gibt es eine Möglichkeit, dass ich diesen Code ändern kann, so dass es durch den übergeordneten Baum navigieren wird, bis es ein div namens inbiboxage findet und das Bild dort ersetzen?

Wenn ich zwei verschiedene Div-Klassen habe, inputboxage und inputboxageLarge, gibt es eine Möglichkeit, diese Funktion so zu ändern, dass sie mit beiden funktioniert und das Hintergrundbild durch ein anderes Bild ersetzt?

Answer 1

Ich denke

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

statt $(this.parentNode) verwenden funktionieren sollte.

Siehe jQuery traversing documentation

Edit: aktualisiert folgende Prody Antwort (geändert Elternteil Eltern)

Answer 2

Ich bin nicht 100% sicher, aber ich denke, was Sie brauchen, ist, was Antwort Phill Sacre lässt darauf schließen, außer parents mit (man beachte die letzten s)

von jQuery API:

Eltern (String expr) gibt jQuery eine Reihe von Elementen der einmaligen paren enthalten ts der übereinstimmenden Menge von Elementen.

Eltern (Zeichenfolge expr) gibt jQuery zurück Ruft eine Gruppe von Elementen ab, die die eindeutigen Vorfahren der übereinstimmenden Menge von Elementen enthalten (mit Ausnahme des Stammelements).

Answer 3

nun in HTML, da nur IDs eindeutig sind, können Sie die div direkt referenzieren, ohne jede Traversal zu tun:

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

Beachten Sie, dass, während es möglich ist, die übergeordneten Elemente für CSS classing zu filtern, Stil-Klassen dor Verhalten ist eine schlechte Idee TM und Sie sollten es vermeiden. Aber wenn Sie wirklich verzweifelt sind, können Sie es versuchen.

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

Answer 4

.parent() CSS (Änderungen hier)