JQuery: выберите первый дочерний узел

Question

Допустим, у меня есть дерево следующей структуры:

<div>node level1
     <div>node level2
          <div>node level3...etc

Есть ли способ в jQuery, что если щелкнуть div level1, отвечают только div of level2?

смысл:

$('div').click(function(){
$('div').children(first div child).css('color','red');
})

спасибо за любой вклад!

:: EDIT ::
Привет всем, спасибо за ваше терпение и вклад.я упорно шел о решении этой проблемы, и это сработало.Мне просто нужно было найти способ взломать структуру моего дерева, и все стало очень ясно.

В основном я хотел найти способ, как заставить дерево суперспа рушиться / расширяться, не застревая в примерах "li ul li", которые я видел, поскольку чувствовал, что они немного непрозрачны.

эта скрипка имеет мое решение.примечание: я предполагаю, что если что-то имеет 0 детей, это, скорее всего, будет ссылка для перехода.Я уверен, что со структурой, которую я изложил, и ваши способные умы смогут решить этот последний шаг.

Спасибо за любую помощь, и я с нетерпением жду любых отзывов.
последнее примечание: это может быть легко закодировано, чтобы соответствовать любому размеру древовидной структуры.цикл while, который подтверждает, что дочерние элементы или узлы щелкнули, который позволяет объединять и вызывать функцию eval, сможет детализировать все дочерние узлы и убедиться, что все они скрыты, прежде чем главный узел также будет скрыт.

просто побочная мысль.

Answer 1

Вы можете сделать это следующим образом:

$('div').click(function(){
  $(this).children('div').css('color','red');
});

Вместо повторного выбора всех <div> элементов, используйте this и выполните .children() оттуда, чтобы получить немедленныйдочерние элементы <div>. Вот краткий пример , обратите внимание, что для <div> изначально требуется color, в противном случае он будет каскадно падать ... даже если он не был применен к элементам уровня 3.

Answer 2

Это, вероятно, то, что вы ищете:

http://api.jquery.com/first-child-selector/

Answer 3

Дело в селекторе css, поскольку его использует jquery.

Я думаю, вы можете просто определить класс для div, который хотите выбрать:

<div class="Level1">node level1
    <div class="Level2">node level2</div>
</div>

Затем выберите егоJQuery, как это:

$('div.Level1').click(function(){
$(this).children('div.Level2').css('color','red');
})

Answer 4

Отредактировано для .click() context:

Внутри события click у вас будет объект this jQuery для работы (это элемент, по которому щелкнули. Таким образом, вы можете использовать .children() чтобы получить доступ ко всем дочерним элементам (он вернет только непосредственные дочерние элементы, так что только элементы уровня 2 в вашем сценарии):

$('div').click(function(){
    $(this).children().css('color','red');
}

Или, если вы хотите только first предмет 2-го уровня, вы можете использовать селектор :first-child:

$('div').click(function(){
    $(':first-child', this).css('color','red');
}