JQuery Применение CSS для внутреннего DIV

Question

Я пытаюсь применить стиль к внутреннему div, который содержится в родительском div. Родительский div также содержит множество других div, но я просто хочу применить цвет к div [0].

$("#parentDiv div")[0].css('background-color', 'red'); 

Почему-то написано "функция css не определена!"

Answer 1

JQuery способ сделать это:

$('#parentDiv div').eq(0).css({backgroundColor: 'red'});

.eq(0) как [0], но дает вам объект jQuery. JQuery eq() документы объясняют большую часть этого (кроме того, почему это "eq", а не что-то более разумное, как "at").

Answer 2

$("#parentDiv div")[0] // returns a regular DOM object, NOT jquery extended

Вы можете попробовать:

$("#parentDiv div").eq(0).css('background-color', 'red');

Хотя селектор :first должен работать.

Если он по-прежнему не работает, обязательно посмотрите свой HTML-код после запуска метода, чтобы определить, действительно ли первый элемент является тем, чем вы думаете.

Answer 3

Это должно работать

$("#parentDiv div:first").css(background-color, 'red');

Answer 4

Я столкнулся с подобной ошибкой, подобной этой, и не смог понять, что происходит не так. Это связано с функцией, возвращающей объект DOM против объекта jQuery.

В конце я сделал что-то подобное, и это сработало, но я не уверен, что это лучший способ сделать это:

var divID = $("#parentDiv").children("div").attr("id");
$("#"+divID).css('background-color', 'red');

Answer 5

Иногда мне больше повезло, используя другой синтаксис CSS. Вы можете попробовать это (также лучше, если вы собираетесь добавить несколько стилей):

$('#parentDiv div:first').css({backgroundColor:'red'});

Вы также можете попробовать селекторы nthChild или eq, если вам нужно прикрепить стиль (ы) к некоторому div, отличному от первого (просто помните, что nthChild основан на ОДНОМ, а не на нулевом ...):

$('#parentDiv div:nthChild(1)').css({backgroundColor:'red'});
// or
$('#parentDiv div:eq(0)').css({backgroundColor:'red'});

Answer 6

Не можете ли вы использовать селектор "первый ребенок"?

Пример: $ ("# parentDiv div: first-child"). css ('background-color', 'red');