jQuery wählen div innerhalb div innen Form

Question

Ich habe diesen Code:

$(document).ready(function() { 
 
    $form.find() 
 

 
});

#second { 
 
    font-size: 20px; 
 
    color: green; 
 
    background: white; 
 
    text-align: center; 
 
}

<form> 
 
    <div class="first" style="width: 301px; margin:5px 0 0 10px;"> 
 
    <div id="second" style="font-size:18px; position: absolute; top: 8px; left: 5px; width: 300px; height: 42px;">Hello</div> 
 
    </div> 
 
</form>

Ich möchte die div mit id="second", wählen, um die background-red zu ändern. Gibt es dafür eine Lösung? find().

Das Wichtigste für mich ist, dass div mit seiner id auswählen. jsFiddle

Answer 1

Warum nicht nur das tun?

$(document).ready(function() { 
 
     $("#second").css("background-color", "red") 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form> 
 
    <div class="first" style="width: 301px; margin:5px 0 0 10px;"> 
 
    <div id="second" style="font-size:18px; position: absolute; top: 8px; left: 5px; width: 300px; height: 42px;">Hello</div> 
 
    </div> 
 
</form>

Sie das Element mit diesem finden #second durch die Verwendung und dann die Farbe ändern. Wenn Sie möchten, können Sie dies an ein Ereignis click binden, oder wie auch immer Sie das background-color ändern möchten.

Und wenn Sie Absicht sind find() auf verwenden Sie dies tun könnte, und Sie möchten mehrere Elemente finden, könnten Sie tun dies

$(document).ready(function() { 
 
     $("form").find("#second, #fourth").css("background-color", "red"); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="first"> 
 
    <div id="second">Hello</div> 
 
    <div id="third">World</div> 
 
    <div id="fourth">World</div> 
 
    </div> 
 
</form>

Sie können beliebig viele Elemente zielen als Sie wollen, indem Sie sie mit einem Komma trennen.

Answer 2

Oder als Abstieg der Form:

$(document).ready(function() { 
    $("form").find("div#second").css('background-color', 'red'); 
}); 

Answer 3

, wenn Sie sicher, dass der div id sind vorher wäre es wahrscheinlich ein wenig überflüssig mit .find() sein, wie Sie einfach den jQuery-Selektor $("#second") nutzen könnten.

Wenn Sie verwenden .find() wollte, obwohl Sie nur angeben müssen, wo Sie die Suche (das Formular in Ihrem Fall) beginnen soll und wie würden Sie filtern möchten die Suche

so sein:

$("form").find("#second") 

Sie könnten dann ist die Kette, dies zu .css() oder es auf eine Variable hinzuzufügen, oder was auch immer :)

Answer 4

$(document).ready(function() { 
    $("form").find("div#second").addClass('red'); 
}); 

CSS

Answer 5

$(document).ready(function() { 
    $("form div").find("div").css('background-color', 'black'); 
});