在提交时获取DOM树中所有元素的ID

Question

我正在构建一个与jQuery UI可排序具有拖放界面的页面上的表单，并将其集成到引导3的JavaScript标签中。但是，一旦内容按照我想要的顺序排列并提交了表单，我就需要“循环”所有相关元素，并按照DOM树顺序提交它们，以便脚本处理。

我的表格结构如下：

<form>
  <div class="tab-content">
    <div class="tab-pane" id="ASF">
      <div class="panel panel-default">
        <div class="panel-body">
          <div class="row">
            <div class="col-xs-4">
              <ul class="list-group connected" id="8-1">
                <li class="list-group-item ui-state-default-ui-state-disabled ui-state-locked">Day 1</li>
                <li class="list-group-item ui-state-default" id="27275"></li>
                <li class="list-group-item ui-state-default" id="27213"></li>
                ...
              </ul>
            </div>
            <div class="col-xs-4">
              <ul class="list-group connected" id="8-2">
                <li class="list-group-item ui-state-default-ui-state-disabled ui-state-locked">Day 2</li>
                <li class="list-group-item ui-state-default" id="28445"></li>
                <li class="list-group-item ui-state-default" id="26784"></li>
              </ul>
            </div>
            ...
          </div>
        </div>
      </div>
    </div>
    <div class="tab-pane" id="CSPE">
      <div class="panel panel-default">
        <div class="panel-body">
          <div class="row">
            <div class="col-xs-4">
              <ul class="list-group connected" id="20-1">
                <li class="list-group-item ui-state-default-ui-state-disabled ui-state-locked">Day 1</li>
                <li class="list-group-item ui-state-default" id="18775"></li>
                <li class="list-group-item ui-state-default" id="36225"></li>
              </ul>
            </div>
            <div class="col-xs-4">
              <ul class="list-group connected" id="20-2">
                <li class="list-group-item ui-state-default-ui-state-disabled ui-state-locked">Day 2</li>
                <li class="list-group-item ui-state-default" id="84451"></li>
                <li class="list-group-item ui-state-default" id="78955"></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  ...
  <input type="hidden" name="data_array[]">
  <button class="btn-submit" type="submit">Submit</button>
</form>

现在，当表单提交时，我需要通过输入的拥有I的所有元素的I，正确地嵌套它们在页面上的位置。即：

array(
  "ASF" => array(
    "8-1" => array(
      "27275", "27213"
    ),
    "8-2" => array(
      "28445", "26784"
    )
  ),
  "CSPE" => array(
    "20-1" => array(
      "18775", "36225"
    ),
    "20-2" => array(
      "84451", "78955"
    ),
  )
)

但是，我不知道从哪里开始！研究使我认为我需要使用.each()循环页面上的元素，并可能使用.find()查找嵌套在其他元素中的元素，但是如何解决这个问题完全超出了我的专业范围。

还是有更简单的方法来做同样的事情？

Answer 1

您可以在每个循环中使用jQuery的hasAttribute选择器：

$("*[id]").each(function( index ) {

});

https://api.jquery.com/has-attribute-selector/