Question

我在一个页面上构建一个表单，该表单具有jQuery UI's sortable的拖放界面，并且它已集成到Bootstrap 3's JavaScript Tabs中。但是，一旦内容按照我想要的顺序，并且表单已提交，我需要＆＃34;循环通过＆＃34;所有相关元素，并以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>

现在，提交表单时，我需要通过输入data_array对所有的ID 拥有 ID的元素进行POST，正确嵌套他们此刻如何在页面上。即：

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()找到嵌套在其他元素中的元素，但是如何解决这个问题完全超出了我的专业知识。 / p>

或者可能有更简单的方法来做同样的事情吗？

Answer 1

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

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

});

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

在提交时以DOM树顺序获取所有元素的ID

1 个答案: