Использование jQuery для изменения стиля css корневого узла дерева angularJS

Вот мой jsfidder: Демо.

Я пытаюсь использовать древовидное представление AngularJS, и это официальная демонстрация .

<div
  data-angular-treeview="true"
  data-tree-model="data"
  data-node-id="value"
  data-node-label="names"
  data-node-children="nodes" >
</div>

Я хочу изменить стиль CSS корневого узла, не затрагивая дочерние узлы. В этой демонстрации это означает изменить стиль трех корневых узлов (например, просто изменить цвет их фона на красный). Как это сделать с помощью jQuery? Или у вас есть лучший способ? Подскажите пожалуйста, спасибо!


jquery css angularjs
person 0n1yDream    schedule 07.05.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вся структура состоит из вложенных неупорядоченных списков (<li> элементов внутри <ul> списков), и каждый элемент списка имеет элемент значка <i> и текст в <span>.

Поэтому, если вы хотите выбрать только родительский элемент, вы можете использовать селектор прямого потомка >, который вернет только первый прямой дочерний элемент. См. JSFiddle здесь: http://jsfiddle.net/mastazi/r301gpwj/

/* style only parent */
$(document).ready( function(){
    // give border only to first-level element
    $('div#tree > ul > li').css('border', '3px solid red');
    // green text for first level
    $('div#tree > ul > li').css('color', 'green');
    //reset to black for inner levels after first
    $('div#tree > ul > li ul li').css('color', 'black');
});
person mastazi    schedule 07.05.2015
comment
Спасибо за ваш ответ. Я обнаружил, что использование селектора элементов не может удовлетворить мои потребности. Фактически, при использовании древовидного просмотра я пытаюсь добавить кнопку с выпадающим меню после узла, который обеспечивает некоторые операции, такие как обновление и так далее. Использование селектора элементов с $('div#tree > ul > li').append() может добавить кнопку, но не может получить значение узла, показанное в ‹li›. - person 0n1yDream; 07.05.2015
comment
Я пытаюсь добавить кнопку при создании дерева, изменив angulartreeview.js, но каждый узел (будь то корневой узел или дочерний узел) имеет после него кнопку. - person 0n1yDream; 07.05.2015
comment
Как показано в этом jsfiddle.net/0n1ydream/yrcat3dq, как удалить <span class="background">test</span> из дочерних узлов? - person 0n1yDream; 07.05.2015
comment
Спасибо, что ответили на мой вопрос. Наконец-то я решаю эту проблему. Для корневого узла, который нуждался в специальной операции, я использую ng-repeat. Для этих дочерних узлов я использую плагин для создания древовидного представления. Если вы можете решить это с помощью API-интерфейса remove() или других методов, сообщите мне. - person 0n1yDream; 07.05.2015
comment
Привет, @0n1ydream, да, кажется, ты решил проблему, изменив угловую сторону, я придерживался jQuery, потому что ты упомянул, как это сделать с помощью jQuery? в вашем вопросе. - person mastazi; 07.05.2015
comment
Вы спрашиваете, как удалить элемент span, это будет что-то вроде $('div#tree ul > li > span').css('display', 'none');, однако вы НЕ обязаны использовать jQuery, и на самом деле лучше воздействовать на код, который в первую очередь генерирует дерево. - person mastazi; 07.05.2015