Adjusting the appearance of a JavaScript element based on its hierarchy level

Currently, I am utilizing Jqtree to create a drag and drop tree structure. My main goal is to customize the appearance of the tree based on different node levels.

Javascript Tree Structure


var data = [
  {
      name: 'node1', id: 1,
      children: [
          { name: 'child1', id: 2 },
          { name: 'child1', id: 2, children: [
              { name: 'child7', id: 7 },
              { name: 'child7', id: 8 } ] },
          { name: 'child2', id: 3 }
      ]
  },
  {
      name: 'node2', id: 4,
      children: [
          { name: 'child3', id: 5 },
          { name: 'child4', id: 6 }
      ]
  }
];
$('#tree1').tree({
  data: data,
  autoOpen: true,
  dragAndDrop: true
});

Code snippet for displaying the tree


$(function() {
    $('#tree1').tree({
        data: data,
        autoOpen: true,
        dragAndDrop: true

    });

Although I have gone through the jqtree documentation, I am still unsure about how I can apply custom styles or code specific to the results generated by the 'data' variable.


var node = $('#tree1').tree('getNodeById', 123);
var treelevel = node.getLevel();

Answer №1

If you want to style elements based on their id, you can use jQuery to assign ids and styles:

$('#tree1').tree({
    data: data,
    onCreateLi: function(node, $li) {
        $li.attr('id', 'item' + node.id);
    }
});

#item5 span{background: red;}

Check out this example on jsFiddle for reference.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Accessing elements in AngularJS through ng-click function

According to information provided in this answer, it is necessary to pass the $event object to the ng-click function in order to access the target element. $scope.setMaster = function(obj, $event){ console.log($event.target); } Although using event.t ...

Struggling with utilizing data encoded by PHP into JSON format when working with JavaScript to showcase graphs using the chart.js library

My goal is to showcase a graph using the chart.js JavaScript library. I am retrieving data from a database in PHP and passing it to JavaScript using the json_encode() method to convert it into a JavaScript variable. The data consists of two fields from a & ...

No results found when attempting to intersect mouse click raycast on point cloud in Three JS (empty array returned)

I've been working on rendering a point cloud and attempting to select a single point, but unfortunately, the method raycaster.intersectObjects(scene.children, true) is returning an empty array. I've tried various methods to calculate the pointer. ...

Personalize the hover effect of CardActionArea

I'm attempting to personalize the hover effect of material-ui's CardActionArea for a specific component in my React application. Unfortunately, I am struggling to locate detailed documentation on how to style it effectively. Even after experimen ...

What is the best way to run a promise once the endpoint has responded?

Is it possible to fulfill a promise after the response has been sent to the browser without using await? I must convert a video and save the output file in the operating system. For performance reasons, I want to avoid using await. Here's an example: ...

Using jQuery to reconstruct a list from a group of div elements

Seeking advice on how to convert an HTML section of divs into list items. Here is a sample of the current HTML structure: <div> <small>2019-10-31 10:41 Customer unregistered</small> </div> <div> <small>2019 ...

The component encounters a transformation in which prop values shift to undefined

My component seems to be encountering some instability. The value assigned to "this.state.list" from this.props is being immediately set to "undefined". I'm struggling to comprehend why this is happening. Can anyone spot the issue in the code? this.s ...

Having trouble implementing a nested grid system in Bootstrap

Struggling with creating a grid layout that looks like the one in this image. I initially thought of setting up a row with 2 divided columns, then adding another row+column within each of those 2 columns to place a card inside. This is an excerpt of my c ...

Building a Sharepoint application with Angular 2 using the CLI and Webpack

Trying to deploy an Angular 2 CLI App to a SharePoint 2013 site has been quite challenging. The app works fine when embedded via a Content Editor Webpart, but the console throws an exception: zone.js:158 Uncaught Error: Sys.ParameterCountException: Parame ...

Encountering an issue while attempting to generate a dialog popup with jQuery

As a beginner in jQuery, I am attempting to implement a popup dialog box for users in case of an error. However, I'm encountering issues with the following jQuery code: <script type="text/javascript"> $(document).ready(function() { var $dia ...

To enable communication between methods, you can easily add a property to a JavaScript class component

Is there a better way to communicate between methods in a class? class T extends React.Component { constructor(props) { super(props) this.a = false; } methodA { //will set 'a' in this method, maybe async. } ...

Unable to locate the value of the query string

I need help finding the query string value for the URL www.example.com/product?id=23 This is the code I am using: let myApp = angular.module('myApp', []); myApp.controller('test', ['$scope', '$location', '$ ...

Tips to stop scrolling when clicking on a link in a Vue.js carousel

How can I prevent the page from scrolling when clicking on a link in a Vue.js carousel? I've created a carousel card to mimic the ones found on Netflix's main page. It works fine on a single component but when I add multiple carousel components ...

Discover more in React about using ellipses (...) with dangerouslySetInnerHTML

What is the best method for limiting the number of HTML lines retrieved using dangerouslySetInnerHTML in a React application and creating a '... Read More' expander for it? I attempted to use react-lines-ellipsis, but unfortunately the 'tex ...

Incorporate the ability to display a shape on a map when hovering over a table element, without the need to manually code a JavaScript function for every instance

I came across a script online that allows me to hover over text and have a shape appear on an imagemap. It's functional, but only works for a single instance. Is there a way to implement a JavaScript that handles individual instances so I don't h ...

Guide on placing an <img> within a navigation bar

I am currently working on a Bootstrap 4 navbar that includes both a logo and text in the navbar-brand section. However, I am facing difficulties in positioning the brand-logo and text accordingly. <!doctype html> <html ...

Using CSS Clip Path to conceal elements

My current design uses clip-path for a gradient effect at the top of the page. Ideally, I want the two angles to meet seamlessly without any visual issues. I initially positioned the top so that they touch perfectly and nothing interferes with the angled ...

The resource in CosmosDB cannot be found

I have successfully stored documents on Cosmos, but I am encountering an issue when trying to retrieve them using the "read" method. this.cosmos = new CosmosClient({ endpoint: '' key: '' }); this.partitionKey = '/id' thi ...

Struggling with making JSON.parse() function properly in a Discord Bot

I have a separate JSON file connected like this const Players = require('./Database/Players.json'); and a parser that handles the code client.on('message', message => { if (message.content.toLowerCase() ==='smack activate ...

Grid with a column range of 1 to 3 should be used

My website currently features a grid that can have anywhere from 1 to 3 columns. To ensure flexibility in the number of columns, I am using auto-fit: .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr)); gap: 40px; ...