JQuery, чтобы выбрать DIV внутри DIV внутри формы

Question

У меня есть этот код:

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

Я хочу, чтобы выбрать div с id="second", чтобы изменить background к red. Есть ли какое-либо решение для этого, используя find().

Самое важное для меня - выбрать это div используя его id. jsFiddle

Answer 1

Почему бы не просто сделать это?

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

Вы можете найти элемент, используя #second, а затем изменить цвет, используя это. Если вы хотите, вы можете связать это с событием click или любым другим способом, который вы хотели бы изменить background-color.

И если вы намерены использовать find() вы могли бы сделать это, и вы хотите найти несколько элементов, вы могли бы сделать это

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

Вы можете нацелить столько элементов, как вы хотите, разделив их запятой.

Answer 2

Или, как сходят формы:

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

Answer 3

, если вы уверены в сНу идентификатор заранее было бы, вероятно, будет немного излишним использованием .find(), как вы могли бы просто использовать селектор JQuery $("#second").

Если вы хотите использовать .find(), хотя вам просто нужно указать, где вы хотите начать поиск (форму в вашем случае), и как вы хотите, чтобы отфильтровать результаты поиска

так будет:

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

вы могли бы приковать это .css() или добавить его в переменную или что-то :)

Answer 4

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

CSS

.red{ 
    background-color: red; 
} 

Answer 5

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