Целевой ребенок только не суб-ребенка по Jquery

Если у меня есть следующий РазметкаЦелевой ребенок только не суб-ребенка по Jquery

<div class='parent'> 
    <div class='first'> 
    First Child 
    <div class='second'> 
    Sub-child 
    </div> 
    </div> 
</div>

и Ниже Jquery

$('.parent').children().css("color","#00b3ff");

В результате он меняет цвет как ребенка, так как я хочу для выбора только первого ребенка (не по классу).

источник

2013-09-11 Mohammed Hâmzã

Это уже так, только это правило цвета унаследовано от родителя –

, как о чем-то вроде этого:

$('.parent').children().css('color', '#00b3ff').find('> div').css('color', 'black')

С помощью «>» правило будет применяться только на непосредственных детей, а не всех детей (при использовании .children())

Еще одна вещь, которую вам нужно сделать, - обеспечить, чтобы ребенок не наследовал цвет родителя, может быть сделано путем явного указания цвета.

Вот JSFIDDLE

источник

2013-09-11 11:27:12 Tomzan

. В чем разница между http://jsfiddle.net/arunpjohny/aFvR4/1 и http://jsfiddle.net/arunpjohny/aFvR4/2/ –

Оба тега div являются дочерними элементами .parent. При использовании '>' правило будет применяться только на дочернем потомке – Tomzan

@Tomzan Выглядит внимательно как jsfiddle, какова разница между отображаемым HTML? {i не downvote} Цвет унаследован от родителя –

-1

$('.parent').next('div').css("color","#00b3ff");

источник

2013-09-11 11:27:33

-1

$(".parent > div:eq(0)").css("color","#00b3ff"); 
    $(".parent > div:first").css("color","#00b3ff");

источник

2013-09-11 11:31:18

-1

$('.parent').children('.first').css("color","#00b3ff");

источник

2013-09-11 11:31:41

ОП указал «не по классу». –

Я думаю, что стиль css все равно будет падать до субхриглов, используя этот метод. – BenM

Вы не можете просто сделать это так, свойства CSS наследуются акциях, и - так что если вы применить цвет к first он получит в наследство по second, так как это декандат first

Поскольку мы не можем применять стиль к текстовым узлам, возможным решением является обертывание текста n ода с элементом и стиль его, как указано ниже

$('.parent > div').contents().filter(function(){ 
    return this.nodeType == 3 && $.trim($(this).text()).length > 0; 
}).wrap('<span />').parent().css('color', '#00b3ff');

Демо: Fiddle

источник

2013-09-11 11:33:17

По крайней мере, кто-то понимает проблему! – Archer

хороший способ я тоже сделал это, но по-другому http://jsfiddle.net/cse_tushar/aFvR4/7/ –

DEMO

var sel = $('.parent').children(); 
var old_color = sel.css('color'); 
sel.css('color', '#00b3ff'); 
sel.children().css('color', old_color);

источник

2013-09-11 11:34:18

Никто не оставлять его, поэтому, используя только CSS:

DEMO

.parent > div{ 
    color:#00b3ff; 
} 
.parent div div { 
    color:black; 
}

источник

2013-09-11 11:58:30

Целевой ребенок только не суб-ребенка по Jquery

ответ

Смежные вопросы