jQuery - 展开树视图到选定的节点级别

Question

我试图展开树视图直到选定的节点级别。但我对此没有任何想法，请任何人都可以帮助我。

例如我们在“类别列表”，然后展开“树视图列表”点击“家长d”达“父d”水平以了解详情Here

HTML

<h3> 
Category list 
</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 parent-id='5' li-id='10'>Parent x</li> 
</ul> 

树视图列表

<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

Answer 1

我不是一名JavaScript开发人员，但是，试图解决您的问题，这里是工作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) 
// not changed its your code still, but I need this only first time, so moved into document ready 
    }); 
}); 
$('ul#category li').click(function() { 
    $("#ulCollapse1").html(''); // I have created a new div section 
    $("ul").removeAttr('class'); // remove active classes 
    var nodeId = $(this).attr('id'); 
    arrangeNodes(nodeId); 
    $("#ulCollapse1").html($(".active").parent().clone()); //get the marked elements first parent (which is 'li') 
    $("#ulCollapse").hide(); // hide the main treeview 
}); 

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

希望有所帮助，

Answer 2

我不完全理解你想达到的目标。

但也许：LT（）是你在找什么

HTML

<h3> 
Category list 
</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> 
Node View 
</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/