JQuery детей ошибка? почему не все предметы в детской коллекции

0

вот 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>
  • 1
    Форма имеет только одного дочернего элемента, первый <div> . Первый <input> - это внук, второй - правнук.
  • 0
    Кстати, вам не хватает </div> раньше </form>
Показать ещё 6 комментариев
Теги:
children

3 ответа

1

Вход внутри div не является дочерним элементом формы. .children() получает только прямых детей. Кроме того, входы не наследуют стили от родителя. Если вы хотите, чтобы все они были розовыми, просто выполните:

$('form input').css('color', 'pink');
  • 0
    хорошо, как получить все детские формы? благодарю вас
  • 1
    Вы можете просто сделать $('form input').css('color', 'pink') .
Показать ещё 1 комментарий
0

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


Использовать .find()
$('form').find('input').css('color', 'pink');
  • 0
    Вы отошли на одно поколение от <form> .
  • 0
    @ Barmar ты исправил ответ.
0

Метод jQuery children() возвращает прямые дочерние элементы элемента, а не дочерние его дочерние элементы. Таким образом, в вашем коде выше элементы из 2-го div не будут выбраны.

Чтобы настроить таргетинг, попробуйте

$( "form").children("div").children().css( "color", "red" );

Ещё вопросы

Сообщество Overcoder
Наверх
Меню