Question

我正在做一些让我感到非常悲痛的事情。基本上我使用bootstrap和jQuery来设计一个网页，它已经到了我通过网络发送JSON以保存到hibernate后端的地步。所有对象都设置正常并且正在工作，但我正在寻找一个“更好”的解决方案来生成阵列，而不是我现在得到的那个。关系是这样的：

Parent -> Child -> GrandChild
      `-> Child -> GrandChild

所有映射都是一对多的关系，div在屏幕上的排列方式基本上是这样的：

<div id="left">
    <div id="parent"></div>
    <div id="Child"></div>
    <div id="GrandChild"></div>
</div>
<div id="right">
    <div id="Child"></div>
    <div id="GrandChild"></div>
</div>

（你可以拥有许多“Child”div，并且每个“Child”div之间有很多“GrandChild”div，右边也是相同的 - 嵌套实际上比这更深，但是如果我能弄清楚这个从那开始，我可以适应它）。我现在正在做的是当用户按下“保存”时，通过重命名每个div中每个输入的name元素来构建树，以便在我对整个页面进行串行化时映射工作。我发现这需要一个可怕的函数来基本上遍历所有div并在遇到新的父对象时重置计数器。例如假设（在左侧）：

<div id="left">
    <div id="Parent"></div>
    <div id="Child"></div>
    <div id="GrandChild"></div>
    <div id="GrandChild"></div>
    <div id="GrandChild"></div>
    <div id="Child"></div>
    <div id="GrandChild"></div>
</div>

我的javscript基本上会这样做（伪代码）：

childCounter = -1;
grandChildCounter = -1;

for each div {
   if div == Parent { skip };
   if div == Child { childCounter +=1; grandChildCounter = -1; childDiv.name = childArray[childCounter] };
   if div == GrandChild { grandChildCounter += 1; grandChildDiv.name = childArray[childCounter].grandChildArray[grandChildCounter] };
}

显然，对于更多嵌套级别，这种代码只会变得疯狂......所以我一直试图通过事先构建每个人的孩子并将其作为数组附加到对象来递归生成数组 - 但我遇到了同样的问题需要手动遍历嵌套的问题只是为了将子数组附加到正确的父级。无论哪种方式看起来都很麻烦，并且产生了非常邋code的代码 - 我是javascript和jQuery的新手，所以我想知道我是否会以错误的方式处理这一切，并且正在寻找一些建议。

值得注意的是，整个事物都是动态的，并且基于页面上的按钮按正确的顺序添加新的div已经完美地运行了。当用户按下保存时，树将生成。

我也很抱歉缺乏合适的代码，但工作不在家。提前致谢

Answer 1

仍然不太确定为什么它没有嵌套在DOM中，但是你可以在创建JSON对象之前通过嵌套来跳过映射/循环/反击头痛。

注意：我将ID更改为类，因为页面只能有一个给定ID的实例。

＆＃13;

$(document).ready(function(){
     $('.Child').each(function(){
       $(this).nextUntil('.Child', '.GrandChild').appendTo(this);
     });  
  
    //now it's nested... run json generating code here
});

＆＃13;

.GrandChild { color: blue;}
.Child .GrandChild { color: red;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left">
<div class="Parent">P</div>
<div class="Child">C1</div>
<div class="GrandChild">GC1a</div>
<div class="GrandChild">GC1b</div>
<div class="GrandChild">GC1c</div>
<div class="Child">C2</div>
<div class="GrandChild">GC2a</div>
<div class="Child">C3</div>
<div class="GrandChild">GC3a</div>
<div class="GrandChild">GC3b</div>
</div>

＆＃13;

如果您不想弄乱提供给用户的DOM，您可以克隆整个内容，隐藏它，进行转换并将其删除，直到下次点击保存为止。

Answer 2

Adapting the code from the answer provided previously @Will你可以克隆DOM，隐藏它并使用clonedDom

执行生成JSON字符串的事情

归功于@Will

＆＃13;

$(document).ready(function() {
  var clonedDom;
  $("#save").on('click', function() {
    // clone dom and hide it
    clonedDom = $('#left').clone();
    $(clonedDom).hide();

    // do the nesting
    $(clonedDom).find('.Child').each(function() {
      $(this).nextUntil('.Child', '.GrandChild').appendTo(this);
    });

    // log both doms (to see how different they are, you can remove this later)
    console.log(clonedDom.children());
    console.log($("#left").children());
  });

  //now it's nested... run json generating code here on the clonedDom
});

＆＃13;

.GrandChild {
  color: blue;
}
.Child .GrandChild {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left">
  <div class="Parent">P</div>
  <div class="Child">C1</div>
  <div class="GrandChild">GC1a</div>
  <div class="GrandChild">GC1b</div>
  <div class="GrandChild">GC1c</div>
  <div class="Child">C2</div>
  <div class="GrandChild">GC2a</div>
  <div class="Child">C3</div>
  <div class="GrandChild">GC3a</div>
  <div class="GrandChild">GC3b</div>
</div>

<button id='save'>save</button>

＆＃13;

从未嵌套的div构建嵌套数组？

2 个答案: