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

如果您想要附加编号系统：示例刷新全部设置根据当前视图更新其编号：

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

Jquery选择层次结构

1 个答案: