javascript - Jquery 选择层次结构

Question

在我开始这个问题之前，如果您是 backbone.js 的新手并且想要实现以下功能，您必须使用主干关系模型，或者至少看起来是这样。

我正在尝试创建一个将通过 backbone.js 实现的层次结构，我想知道如何构建层次结构和访问元素。我需要能够添加和删除列表/集合/项目，并希望保持一致的编号策略。 (List1 的显示名称为 list1。如果我删除了 Set1，我希望 Set2 成为 Set1，同时保留其相应的项目)

List1 
^--->Set1  
     ^--->Item1
     ^--->Item2
^--->Set2   
     ^--->Item1

List2 
^--->Set1  
     ^--->Item1
^--->Set2   
     ^--->Item1
     ^--->Item2

等

我的问题是:如何以一种方式构建它，以便遵循相同层次结构的一组函数可以以最紧凑和合乎逻辑的方式访问它们？

我有一个想法:使用 div 并让你的 div id 类似于 id="List"+currentlistnum()+"Set"+currentsetnum()+"Item"+currentitemnum()

还有比这更好的方法吗？

Answer 1

如果您的项目列表在语义上是“列表”，请使用有序列表 (ol) 或无序列表 (ul)。然后，如果您有子列表，则嵌套更多列表。

<ul id="mylist">
    <li>
        <span>List 1</span>
        <ul>
            <li>
            <span>Set1</span>
                <ul>
                    <li>List1Set1Item1</li>
                    <li>Item2</li>
                    <li>Item3</li>
                </ul>
            </li>
            <li>
            <span>Set2</span>
                <ul>
                    <li>Item1</li>
                    <li>Item2</li>
                    <li>Item3</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

并使用 jQuery nth Child selector和直接子 > 用于选择特定元素的其余逻辑，因此您可以使应用程序逻辑远离 HTML。

$('#mylist > li:nth-child(1) > span').text(); // List1
$('#mylist > li:nth-child(1) > ul > li:nth-child(1) > ul > li:nth-child(1)')
   .text(); //List1Set1Item1

如果你想附加一个编号系统:示例 refresing all 设置为根据当前 View 更新其编号:

$('#mylist > li > ul > li > span').each(function(){
  var ordinalPositionOfMyParent = $(this).parent().index() + 1;
  $(this).text('Set' + ordinalPositionOfMyParent);
  });