Question

我现在正在使用jQuery根据用户输入动态生成DIV。由于这些生成和格式化的性质，DIV之间没有直接的父/子关系。事实上，我认为解释它的最简单方法是生成一棵树。我希望能够创建一个自定义层次结构，这样如果删除了树顶部的元素，那么所有的子元素都将被删除。

下面是一个有点可见的例子。该图遵循水平层次结构。

Level 1   Level 2    Level 3
-----------------------------

   X        X          X  \
                       X   | >> These 3 elements are pseudo-children of 
                       X  /     the first elements in level 1 and level 2

            X   <<<<<< X  << The element in level 2 is pseudo-child of  
                       X     the first element in level 1

   X        X          X

            X          X
                       X

更新

代码示例：

<tr>
  <td>Level1</td>
  <td>Level2</td>
  <td>Level3</td>
</tr>
<tr>
  <td />
  <td />
  <td>Level3</td>
</tr>
<tr>
  <td />
  <td />
  <td>Level3</td>
</tr>
<tr>
  <td />
  <td>Level2</td>
  <td>Level3</td>
</tr>
<tr>
  <td />
  <td />
  <td>Level3</td>
</tr>

等...（匹配图表）

Answer 1

我认为你想要的是HTML5中的Flexible Box Module。查看一篇非常好的文章here

游乐场http://flexiejs.com/playground/（以及x浏览器javascript库）

我的猜测是，在UI中使用表格的唯一方法是将树存储在内存中，然后使用它来“知道”要删除的内容。

也许我错过了一些东西，但这有什么问题：

<div id="a">
   <div id="b">
      <div id="c" />
      <div id="d" />
      <div id="e" />
   </div>
   <div id="f">
      <div id="g" />
      <div id="h" />
   </div>
</div>
<div id="i">
   <div id="j">
      <div id="k" />
   </div>
   <div id="l>
      <div id="m" />
   </div>
</div>



Level 1   Level 2    Level 3
-----------------------------

   a        b          c  \
                       d   | >> These 3 elements are pseudo-children of 
                       e  /     the first elements in level 1 and level 2

            f   <<<<<< g  << The element in level 2 is pseudo-child of  
                       h     the first element in level 1

   i        j          k

            l          m
                       n

自定义jQuery层次结构

1 个答案: