3

在我开始这个问题之前，如果您是新来的主干.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()

还有比这更好的方法吗？

4

1 回答 1

3

如果您的项目列表在语义上是“列表”，请使用有序列表（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 选择器和直接子>元素来选择特定的逻辑元素，这样您就可以使应用程序逻辑远离 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 Set 根据当前视图更新其编号：

$('#mylist > li > ul > li > span').each(function(){
  var ordinalPositionOfMyParent = $(this).parent().index() + 1;
  $(this).text('Set' + ordinalPositionOfMyParent);
  });
于 2012-07-26T00:36:24.470 回答