jQuery - Enlarge Tree View to the level of the selected node

Question

jQuery - Enlarge Tree View to the level of the selected node

I am struggling to figure out how to expand the tree view up to a selected node level. If anyone has any ideas on how to accomplish this, please let me know.

For instance, if we click on 'Parent d' in the 'Category list', I want to expand the 'Tree View List' up to the 'Parent d' level. For more details, you can check Here

HTML

<h3>
Category list
</h3>

When clicking on any list item, the tree list should expand up to the selected level

<ul id='category'>
  <li li-id='1' id='1'>Parent 1</li>
  <li li-id='2' id='2'>Parent 2</li>
  <li li-id='3' id='3'>Parent 3</li>
  <li li-id='4' id='4'>Parent 4</li>
  <li li-id='5' id='5'>Parent c</li>
  <li li-id='6' id='6'>Parent d</li>
  <li li-id='7' id='7'>Parent a</li>
  <li li-id='8' id='8'>Parent b</li>
  <li li-id='9' id='9'>Parent e</li>
<li parent-id='5' li-id='10'>Parent x</li>
</ul>

Tree View List

<h3>
Node View
</h3>
<div class='tree'>
<ul id='ulCollapse'>
  <li parent-id='0' li-id='1'>Parent 1</li>
  <li parent-id='1' li-id='2'>Parent 2</li>
  <li parent-id='1' li-id='3'>Parent 3</li>
  <li parent-id='1' li-id='4'>Parent 4</li>
  <li parent-id='3' li-id='5'>Parent c</li>
  <li parent-id='3' li-id='6'>Parent d</li>
  <li parent-id='2' li-id='7'>Parent a</li>
  <li parent-id='4' li-id='8'>Parent b</li>
  <li parent-id='4' li-id='9'>Parent e</li>
<li parent-id='5' li-id='10'>Parent x</li>
</ul>
</div>

jQuery

//$('#ulCollapse li').hide();

$('ul li').click(function(){
    var nodeId = $(this).attr('li-id');
    alert(nodeId);
})

var $ul = $('ul');

$ul.find('li[parent-id]').each(function() {
  $ul.find('li[parent-id=' + $(this).attr('li-id') + ']')
    .wrapAll('<ul />')
    .parent()
    .appendTo(this)
});

DEMO

javascript jquery html css

Answer 1

Answer №1

Although I am not a expert in javascript, I took a shot at solving your issue. Please check out the functional demo

var $ul = $('ul');
$(document).ready(function() {
  $ul.find('li[parent-id]').each(function() {
    $ul.find('li[parent-id=' + $(this).attr('li-id') + ']').wrapAll('<ul />').parent().appendTo(this) 
// This part of the code remains unchanged, but I've placed it inside document ready function for first-time execution only
  });
});
$('ul#category li').click(function() {
  $("#ulCollapse1").html(''); // A new div section was created here
  $("ul").removeAttr('class'); // Remove active classes 
  var nodeId = $(this).attr('id');
  arrangeNodes(nodeId); 
  $("#ulCollapse1").html($(".active").parent().clone()); // Obtain the parent element of the marked elements (which is 'li')
  $("#ulCollapse").hide(); // Hide the main treeview
});

function arrangeNodes(item) {
  $ul.find('li[parent-id=' + item + ']').parent().closest("ul").addClass("active"); // Locate the item and mark the closest ul as active (selected)
}

I hope this solution proves helpful.

Answer 2

Although I am not a expert in javascript, I took a shot at solving your issue. Please check out the functional demo

var $ul = $('ul');
$(document).ready(function() {
  $ul.find('li[parent-id]').each(function() {
    $ul.find('li[parent-id=' + $(this).attr('li-id') + ']').wrapAll('<ul />').parent().appendTo(this) 
// This part of the code remains unchanged, but I've placed it inside document ready function for first-time execution only
  });
});
$('ul#category li').click(function() {
  $("#ulCollapse1").html(''); // A new div section was created here
  $("ul").removeAttr('class'); // Remove active classes 
  var nodeId = $(this).attr('id');
  arrangeNodes(nodeId); 
  $("#ulCollapse1").html($(".active").parent().clone()); // Obtain the parent element of the marked elements (which is 'li')
  $("#ulCollapse").hide(); // Hide the main treeview
});

function arrangeNodes(item) {
  $ul.find('li[parent-id=' + item + ']').parent().closest("ul").addClass("active"); // Locate the item and mark the closest ul as active (selected)
}

I hope this solution proves helpful.

Answer 3

Answer №2

I'm having trouble grasping the goal you're aiming for.

Could it be that :lt() is the solution you seek?

HTML

<h3>
List of Categories
</h3>

<ul id='category'>
  <li li-id='1' id='1'>Parent 1</li>
  <li li-id='2' id='2'>Parent 2</li>
  <li li-id='3' id='3'>Parent 3</li>
  <li li-id='4' id='4'>Parent 4</li>
  <li li-id='5' id='5'>Parent c</li>
  <li li-id='6' id='6'>Parent d</li>
  <li li-id='7' id='7'>Parent a</li>
  <li li-id='8' id='8'>Parent b</li>
  <li li-id='9' id='9'>Parent e</li>
  <li li-id='10' id='10'>Parent x</li>
</ul>
<br>
<br>

<h3>
View of Nodes
</h3>
<div class='tree'>
  <ul id='ulCollapse'>
    <li parent-id='1'>
      <ul>
        <li>Parent 1</li>
      </ul>
    </li>
    <li parent-id='2'>
      <ul>
        <li>Parent 2</li>
        <li>Parent 3</li>
        <li>Parent 4</li>
      </ul>
    </li>
    <li parent-id='3'>
      <ul>
        <li>Parent c</li>
        <li>Parent d</li>
        <li>Parent a</li>
      </ul>
    </li>
    <li parent-id='4'>
      <ul>
        <li>Parent b</li>
        <li>Parent e</li>
      </ul>
    </li>
    <li parent-id='5'>
      <ul>
        <li>Parent x</li>
      </ul>
    </li>
  </ul>
</div>

JS

$cats = $("#category");
$tree = $("#ulCollapse");
$tree.children().hide();

$cats.on("click", "li", function() {
  var nodeId = $(this).attr('li-id');
  console.info("NODE ID: ", nodeId);
  $tree.children().hide();
  var maxEq = $tree.children("[parent-id='" + nodeId + "']").index();
  maxEq < 0 && (maxEq = 0);
  maxEq++; //LTE since :lte() doesn't exist
  console.info("MAX EQ: ", maxEq);
  $tree.children(":lt(" + maxEq + ")").show();
});

FIDDLE ==> https://jsfiddle.net/x45j4fx6/1/

Answer 4

I'm having trouble grasping the goal you're aiming for.

Could it be that :lt() is the solution you seek?

HTML

<h3>
List of Categories
</h3>

<ul id='category'>
  <li li-id='1' id='1'>Parent 1</li>
  <li li-id='2' id='2'>Parent 2</li>
  <li li-id='3' id='3'>Parent 3</li>
  <li li-id='4' id='4'>Parent 4</li>
  <li li-id='5' id='5'>Parent c</li>
  <li li-id='6' id='6'>Parent d</li>
  <li li-id='7' id='7'>Parent a</li>
  <li li-id='8' id='8'>Parent b</li>
  <li li-id='9' id='9'>Parent e</li>
  <li li-id='10' id='10'>Parent x</li>
</ul>
<br>
<br>

<h3>
View of Nodes
</h3>
<div class='tree'>
  <ul id='ulCollapse'>
    <li parent-id='1'>
      <ul>
        <li>Parent 1</li>
      </ul>
    </li>
    <li parent-id='2'>
      <ul>
        <li>Parent 2</li>
        <li>Parent 3</li>
        <li>Parent 4</li>
      </ul>
    </li>
    <li parent-id='3'>
      <ul>
        <li>Parent c</li>
        <li>Parent d</li>
        <li>Parent a</li>
      </ul>
    </li>
    <li parent-id='4'>
      <ul>
        <li>Parent b</li>
        <li>Parent e</li>
      </ul>
    </li>
    <li parent-id='5'>
      <ul>
        <li>Parent x</li>
      </ul>
    </li>
  </ul>
</div>

JS

$cats = $("#category");
$tree = $("#ulCollapse");
$tree.children().hide();

$cats.on("click", "li", function() {
  var nodeId = $(this).attr('li-id');
  console.info("NODE ID: ", nodeId);
  $tree.children().hide();
  var maxEq = $tree.children("[parent-id='" + nodeId + "']").index();
  maxEq < 0 && (maxEq = 0);
  maxEq++; //LTE since :lte() doesn't exist
  console.info("MAX EQ: ", maxEq);
  $tree.children(":lt(" + maxEq + ")").show();
});

FIDDLE ==> https://jsfiddle.net/x45j4fx6/1/

jQuery - Enlarge Tree View to the level of the selected node

Answer №1

Answer №2

Similar questions

How about a custom-designed talking JavaScript pop-up?

Obtaining images from JSON data and displaying them in a modal using AngularJS

What's the process for setting a value in selectize.js using Angular programmatically?

What is the best way to trigger a jQuery function after adding a <div> element through Ajax loading?

A guide on uploading a photo to an existing mySQL database using a form

Difficulty navigating through pages on an iPad due to slow scrolling with JavaScript

Ways to implement a backup plan when making multiple requests using Axios?

Include an Open OnClick event in the React/JSX script

Access view name in controller using Ui-Router

Strategies for Dealing with 'No Search Results' in Your Search Functionality

The anchor tag dwarfs the element it contains

Load HTML 5 video on a webpage after all other elements have finished loading

Listening for an event or using a CSS pseudo-class to detect when the scrollbar becomes

Establishing a unique title and favicon for non-HTML files on a website

Is there a way to launch Visual Studio Code using a web browser?

Modify the appearance of the element that is currently chosen

An operator in rxjs that transforms an Observable of lists containing type X into an Observable of type X

While attempting to troubleshoot a program with mocha using the --debug-brk flag, it turns out that the debugging process actually

I'm curious about the correct method for updating a parent component using a shared service within the ngOnInit function in Angular version 13

Attempting to retrieve and save data in a variable using React Native