Ocultar el menú del árbol a una cierta profundidad -- javascript campo con jquery campo con tree camp codereview Relacionados El problema

Hide the tree menu at a certain depth


5
vote

problema

Español

He creado esta pieza de JS puramente con fines de aprendizaje y esperaba que pudiera que la revisión de código para ver cualquier error / mejoras que pueda hacer.

Básicamente, tengo una estructura de árbol y usaré la variable de profundidad para resolver qué nivel del menú se mostrará.

Aquí está el ejemplo del código: http://jsfiddle.net/nqgbw/5/ < / p>

html

  The Tree <ul>     <li> <a href="?1">Root</a>         <ul>             <li> <a href="?2">Folder 1</a>                 <ul>                     <li><a href="?3">Folder 1.1</a>                     </li>                     <li><a href="?4">Folder 1.2</a>                     </li>                 </ul>             </li>             <li> <a href="?5">Folder 2</a>                 <ul>                     <li><a href="?6">Folder 2.1</a>                     </li>                     <li> <a href="?7">Folder 2.2</a>                         <ul>                             <li><a href="?8">Folder 2.2.1</a>                             </li>                             <li><a href="?8">Folder 2.2.2</a>                             </li>                             <li><a href="?9">Folder 2.2.3</a>                             </li>                         </ul>                     </li>                 </ul>             </li>         </ul>     </li> </ul>   

js

  var calcDepth = function (root) {     var $parent = $(root).parents('ul');     var depth = 0;     while ($parent.length > 0) {         $parent = $parent.parents('ul');         depth += 1;     }     return depth; };   var func = function (rootUL, maxDepth) {     var selectedUL = rootUL;     $(selectedUL.children('li')).each(function () {         var Me = $(this);         if (calcDepth(Me.parent()) == maxDepth) {             Me.hide();         }         if (Me.children('ul').length > 0) {             var selectedUL = Me.children('ul');             func(selectedUL, maxDepth);         }     }); }; var depth = 2; //Change this to set the depth of the menu var selectedUL = $("ul"); func(selectedUL, depth);   

Original en ingles

I have created this piece of js purely for learning purposes and I was hoping you could code review to see any mistakes / improvements I can make.

Basically I have a tree structure and I will use the depth variable to work out what level of the menu I will display.

Here is the code example: http://jsfiddle.net/nqGbw/5/

HTML

The Tree <ul>     <li> <a href="?1">Root</a>         <ul>             <li> <a href="?2">Folder 1</a>                 <ul>                     <li><a href="?3">Folder 1.1</a>                     </li>                     <li><a href="?4">Folder 1.2</a>                     </li>                 </ul>             </li>             <li> <a href="?5">Folder 2</a>                 <ul>                     <li><a href="?6">Folder 2.1</a>                     </li>                     <li> <a href="?7">Folder 2.2</a>                         <ul>                             <li><a href="?8">Folder 2.2.1</a>                             </li>                             <li><a href="?8">Folder 2.2.2</a>                             </li>                             <li><a href="?9">Folder 2.2.3</a>                             </li>                         </ul>                     </li>                 </ul>             </li>         </ul>     </li> </ul> 

JS

var calcDepth = function (root) {     var $parent = $(root).parents('ul');     var depth = 0;     while ($parent.length > 0) {         $parent = $parent.parents('ul');         depth += 1;     }     return depth; };   var func = function (rootUL, maxDepth) {     var selectedUL = rootUL;     $(selectedUL.children('li')).each(function () {         var Me = $(this);         if (calcDepth(Me.parent()) == maxDepth) {             Me.hide();         }         if (Me.children('ul').length > 0) {             var selectedUL = Me.children('ul');             func(selectedUL, maxDepth);         }     }); }; var depth = 2; //Change this to set the depth of the menu var selectedUL = $("ul"); func(selectedUL, depth); 
        

Lista de respuestas

1
 
vote
vote
La mejor respuesta
 

Sería mucho más fácil dejar que el motor selector de CSS seleccione los elementos para ocultar:

  Task<bool>[] tasks = new Task<bool>[sites.Count()]; 5  

NOTA: Agregue el ID Task<bool>[] tasks = new Task<bool>[sites.Count()]; 6 al nivel superior Task<bool>[] tasks = new Task<bool>[sites.Count()]; 7 . Su selector Task<bool>[] tasks = new Task<bool>[sites.Count()]; 8 Selecciona todas las listas en el documento, no solo la superior, por lo que su código se llamó innecesariamente repetidamente para cada lista secundaria.

Para la repetición de cadena, consulte: https://stackoverflow.com//stackoverflow.com/Questions/1877475/Repeat-Character -n-veces .

 

It would be much easier just to let the CSS selector engine select the elements to hide:

var hideDepth = function(root, depth) {    root.find('ul').show(); // Make sure all sublists are visible     var selector = Array(depth + 1).join(' > li > ul'); // Repeat string    root.find(selector).hide(); }  var depth = 2;  var selectedUL = $("#tree");  hideDepth(selectedUL, depth); 

NOTE: Add the id tree to the top level ul. Your selector $('ul')selects all lists in the document, not just the top one, so your code was unnecessarily called repeatedly for each sub list.

For the string repeating see: https://stackoverflow.com/questions/1877475/repeat-character-n-times.

 
 

Relacionados problema

1  Retire todos los nodos que no se encuentren en ningún camino con suma> = k  ( Remove all nodes which dont lie in any path with sum k ) 
Dado un árbol binario, una ruta completa se define como un camino desde la raíz a una hoja. La suma de todos los nodos en ese camino se define como la suma d...

11  Patrones compuestos y de visitantes para la funcionalidad de la encuesta basada en árboles en C #  ( Composite and visitor patterns for tree based survey functionality in c ) 
He escrito alguna funcionalidad de encuesta para un proyecto. Básicamente, un formulario de encuesta genérico que se puede componer de secciones y preguntas. ...

2  Implementación de árboles de búsqueda de ternarios en Python 3  ( Ternary search tree implementation in python 3 ) 
He implementado un árbol de búsqueda ternario. Funciona bien. Pero si crees que algo necesita mejorarse, dígalo. Este código fue probado en Python 3.7.4. c...

13  Árbol de búsqueda binaria - C ++  ( Binary search tree c ) 
Estoy implementando varias estructuras de datos en un intento por aprender C ++. A continuación se muestra un árbol de búsqueda binario que he implementado pa...

2  Montón Binomial en Java  ( Binomial heap in java ) 
Tengo esta implementación de un montón de binomio que proporciona inserto, disminución de la tecla y el extracto en el tiempo logarítmico. minpriorityqueue...

3  Incrustar un HTML (cadena) generado de un árbol estructurado de árbol  ( Embedding an html string generated from a tree structured json ) 
Cómo hacer insertJson3 FASTER (¿Debería mantener el script compatible con versiones anteriores de IE y otros navegadores)? Problema innerHTML de este ...

2  Eliminación de un nodo en un árbol de búsqueda binario  ( Deletion of a node in a binary search tree ) 
Estoy buscando ver si mi implementación del método de eliminación / eliminación en un árbol de búsqueda binario es suficiente, legible y se ejecuta en un tiem...

4  Función abstracta del mapa del árbol  ( Abstract tree map function ) 
Ejercicio 2.31. Resumen tu respuesta Para ejercer 2.30 para producir un Procedimiento Árbol - Mapa con la propiedad. ese árbol cuadrado podría definirs...

12  Codificación de árbol binario  ( Binary tree encoding ) 
Implementé una solución a este desafío de codificación en el código de golf. Tengo experiencia decente con C / C ++, pero ha sido un tiempo desde que los us...

4  Eliminar nodos alternativos de una lista vinculada  ( Delete alternate nodes of a linked list ) 
Si la lista vinculada es 1- & gt; 2- & gt; 3- & gt; 4 entonces la salida debe ser 1- & gt; 3. Si la lista vinculada es 1- & gt; 2- & gt; 3- & gt; 4- & gt; 5,...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos