вот 2 ввода в форме, почему весь текст розового цвета, но вход [name2] черный? почему вход [name2] не находится в коллекции children()?
<form>
<div>Form is surrounded by the green border.
<label for="name">Child of form:</label>
<input name="name" id="name" value="123" />
<div>
<label for="name2">Child of form in div:</label>
<input name="name2" id="name2" value="1234" />
</div>
</form>
<script>
$( "form").children().css( "color", "pink" );
$( "form").children("div").css( "color", "red" );
</script>
Вход внутри div не является дочерним элементом формы. .children()
получает только прямых детей. Кроме того, входы не наследуют стили от родителя. Если вы хотите, чтобы все они были розовыми, просто выполните:
$('form input').css('color', 'pink');
$('form input').css('color', 'pink')
.
.children() получает только прямых детей.
Получите дочерние элементы каждого элемента в наборе согласованных элементов, необязательно отфильтрованных селектором.
$( "form").children("div").css( "color", "red" );
<form>
<div>Form is surrounded by the green border.//children
<label for="name">Child of form:</label>//grand children
<input name="name" id="name" value="123" />//grand children
<div>//grand children
<label for="name2">Child of form in div:</label>//grand grand children
<input name="name2" id="name2" value="1234" />// grand grand children
</div>
</form>
$('form').find('input').css('color', 'pink');
<form>
.
Метод jQuery children() возвращает прямые дочерние элементы элемента, а не дочерние его дочерние элементы. Таким образом, в вашем коде выше элементы из 2-го div не будут выбраны.
Чтобы настроить таргетинг, попробуйте
$( "form").children("div").children().css( "color", "red" );
<div>
. Первый<input>
- это внук, второй - правнук.</div>
раньше</form>