我正在尝试获取每组父 div 的 ID 值列表。使用 Draglua 将站点拖入组中，然后我想创建一个字典字符串，我可以将其提交到服务器端表单并对其进行处理。
该字典字符串应包含每个组内所有 id 的列表，我下面的脚本当前适用于一个组 (A)，但不适用于所有组，我假设有一种更好的方法可以将所有组合并到一个组中？
因此，在用户将网站拖入组后，我希望能够单击“应用组”，然后将 site_groups 的值设置为
[{group: a, ids: [3,4,5]},{group: b, ids: [31,4]},{group: c, ids: [8]},..etc]
然后我可以提交此内容并在服务器端处理它，有人可以提供帮助吗？
谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.css"
integrity="sha256-iVhQxXOykHeL03K08zkxBGxDCLCuzRGGiTYf2FL6mLY=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style type="text/css">
.drag-space {
width: 100%;
min-height: 20px;
}
</style>
</head>
<body>
<div class="container-scroller">
<div class="container-fluid page-body-wrapper">
<!-- partial -->
<div class="main-panel">
<div class="content-wrapper">
<div class="row">
<!-- /.card -->
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<div class="d-flex flex-row justify-content-between">
<div><i class="fa fa-layer-group fa-fw"></i> Change Groups</div>
<div class="text-muted mb-1 small">
<a class="btn btn-sm btn-outline-primary" id="apply-tab" href="javascript:post();">Apply group changes</a>
</div>
</div>
</div>
<div class="card-body">
<form id="sitegroups_form" method="post">
<input type="text" id="site_groups" />
</form>
<div class="row">
<div class="col-3">
<h4>A - <small class="text-muted">1 Sites</small></h4>
<div id="drag-A" class="drag-space">
<div id="7">
<a href="/sites/site/7/">Aberdeen</a>
</div>
</div>
</div>
<div class="col-3">
<h4>B - <small class="text-muted">0 Sites</small></h4>
<div id="drag-B" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>C - <small class="text-muted">0 Sites</small></h4>
<div id="drag-C" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>D - <small class="text-muted">0 Sites</small></h4>
<div id="drag-D" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>E - <small class="text-muted">0 Sites</small></h4>
<div id="drag-E" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>F - <small class="text-muted">0 Sites</small></h4>
<div id="drag-F" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>G - <small class="text-muted">0 Sites</small></h4>
<div id="drag-G" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>H - <small class="text-muted">0 Sites</small></h4>
<div id="drag-H" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>I - <small class="text-muted">0 Sites</small></h4>
<div id="drag-I" class="drag-space">
</div>
</div>
</div>
</div>
</div>
<!-- /.card-body -->
<div class="card">
<div class="card-header">
<i class="fa fa-layer-group fa-fw"></i> Sites not in change Groups
</div>
<div class="card-body">
<div class="row" id="drag-source">
<div id="8" class="col-3">
<a href="/sites/site/8/">London</a>
</div>
<div id="9" class="col-3">
<a href="/sites/site/9/">New York</a>
</div>
<div id="10" class="col-3">
<a href="/sites/site/10/">Manchester</a>
</div>
<div id="11" class="col-3">
<a href="/sites/site/11/">Liverpool</a>
</div>
<div id="12" class="col-3">
<a href="/sites/site/12/">Edinburgh</a>
</div>
<div id="13" class="col-3">
<a href="/sites/site/13/">Tokyo</a>
</div>
</div>
</div>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
</div>
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.js"
integrity="sha256-rVf3H94DblhP4Z6wLSa2mpMwRS5qePBWykE6QWPOaO0=" crossorigin="anonymous"></script>
<script type="text/javascript">
// Begin Dragula JS
var drake = dragula([document.querySelector('#drag-source'), document.querySelector('#drag-A'), document.querySelector('#drag-B'), document.querySelector('#drag-C'), document.querySelector('#drag-D'), document.querySelector('#drag-E'), document.querySelector('#drag-F'), document.querySelector('#drag-G'), document.querySelector('#drag-H'), document.querySelector('#drag-I'),]);
// when item dropped
drake.on('drag', function (el,target,source,sibling) {
el.classList.remove('col-3');
})
// get the items within a group
$("#apply-tab").click(function(){
var a_children = document.querySelectorAll("#drag-A div");
var a_ids = []
for (var i = 0; i<a_children.length; i++) {
a_ids.push(a_children[i].id)
}
var group_a_ids = '{group: a, ids: ['+ a_ids +']}';
$("#site_groups").val(group_a_ids);
});
</script>
<!-- End custom js for this page-->
</body>
</html>最佳答案
要回答您关于需要一次考虑所有组的问题(无需处理拖放部分)，您可以利用 HTML 类 drag-space，如下所示:
$("#apply-tab").click(function(){
var group_ids = {};
$(".drag-space").each(function() { // Loop over all items of class 'drag-space'
var id = this.id;
var key = id.replace(/drag-/, "").toLowerCase();
var children = document.querySelectorAll("#" + id + " div");
var ids = []
for (var i = 0; i<children.length; i++) {
ids.push(children[i].id)
}
group_ids[key] = ids;
});
$("#site_groups").val(JSON.stringify(group_ids));
});
关于javascript - JQuery - 从父 div 中获取未知数量的子级的 id 值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59286155/