jQuery 可排序获取新 Parent ID?
jQuery Sortable Getting New Parent ID?
我今天正在使用 sortable,有点卡住了。
我正在尝试获取新的 parent 的 ID 以在 ajax 请求中使用。
编辑:我现在记录了 parent,但它只是在数组中为所有这些 ID 添加了相同的 parent ID。
$('.portlet-row').sortable({
connectWith: ".portlet-row",
update: function(e, ui) {
var imageids_arr = [];
var listids_arr = [];
$('.portlet').each(function(){
var id = $(this).attr('id');
var split_id = id.split("_");
imageids_arr.push(split_id[1]);
var ids = $(e.target).attr('id');
var split_ids = ids.split("_");
listids_arr.push(split_ids[1]);
});
$.ajax({
url: 'sorts.php',
type: 'post',
data: {imageids:imageids_arr, listids: listids_arr},
success: function(response){ }
});
}
});
$('.portlet-row').disableSelection();
我不知道我是否理解正确,但是当您遍历 .portlet
div 时,您需要使用它来获取其中的 .portlet-row
值。您可以使用 $(this).find('.portlet-row').attr('id')
得到 value.Also,而不是创建 2 个不同的数组,你可以只创建 JSON Array
与 listid
和 imageid
一起并将它们传递给你的 .
演示代码 :
$('.portlet-row').sortable({
connectWith: ".portlet-row",
update: function(e, ui) {
var imageids_arr = [];
var listids_arr = [];
var datas = new Array()
$('.portlet').each(function() {
item = {}; //new object array
var id = $(this).attr('id');
var split_id = id.split("_");
imageids_arr.push(split_id[1]);
item["imageid"] = split_id[1]; //add object
//current portlet div->under that find porlet row-> id
var ids = $(this).find('.portlet-row').attr('id');
var split_ids = ids.split("_");
listids_arr.push(split_ids[1]);
item["listid"] = split_ids[1]; //add object
datas.push(item); //add to array object
});
console.log(imageids_arr)
console.log(listids_arr)
console.log(datas)
}
});
$('.portlet-row').disableSelection();
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="portlet" id="port_1">
<div id="chart_7" class="portlet-row ui-sortable">
<p>Some text</p>
</div>
</div>
<div class="portlet" id="port_2">
<div id="chart_8" class="portlet-row ui-sortable">
<p>Some text1</p>
</div>
</div>
<div class="portlet" id="port_3">
<div id="chart_9" class="portlet-row ui-sortable">
<p>Some text11</p>
</div>
</div>
<div class="portlet" id="port_4">
<div id="chart_10" class="portlet-row ui-sortable">
<p>Some text111</p>
</div>
</div>
我今天正在使用 sortable,有点卡住了。
我正在尝试获取新的 parent 的 ID 以在 ajax 请求中使用。
编辑:我现在记录了 parent,但它只是在数组中为所有这些 ID 添加了相同的 parent ID。
$('.portlet-row').sortable({
connectWith: ".portlet-row",
update: function(e, ui) {
var imageids_arr = [];
var listids_arr = [];
$('.portlet').each(function(){
var id = $(this).attr('id');
var split_id = id.split("_");
imageids_arr.push(split_id[1]);
var ids = $(e.target).attr('id');
var split_ids = ids.split("_");
listids_arr.push(split_ids[1]);
});
$.ajax({
url: 'sorts.php',
type: 'post',
data: {imageids:imageids_arr, listids: listids_arr},
success: function(response){ }
});
}
});
$('.portlet-row').disableSelection();
我不知道我是否理解正确,但是当您遍历 .portlet
div 时,您需要使用它来获取其中的 .portlet-row
值。您可以使用 $(this).find('.portlet-row').attr('id')
得到 value.Also,而不是创建 2 个不同的数组,你可以只创建 JSON Array
与 listid
和 imageid
一起并将它们传递给你的
演示代码 :
$('.portlet-row').sortable({
connectWith: ".portlet-row",
update: function(e, ui) {
var imageids_arr = [];
var listids_arr = [];
var datas = new Array()
$('.portlet').each(function() {
item = {}; //new object array
var id = $(this).attr('id');
var split_id = id.split("_");
imageids_arr.push(split_id[1]);
item["imageid"] = split_id[1]; //add object
//current portlet div->under that find porlet row-> id
var ids = $(this).find('.portlet-row').attr('id');
var split_ids = ids.split("_");
listids_arr.push(split_ids[1]);
item["listid"] = split_ids[1]; //add object
datas.push(item); //add to array object
});
console.log(imageids_arr)
console.log(listids_arr)
console.log(datas)
}
});
$('.portlet-row').disableSelection();
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="portlet" id="port_1">
<div id="chart_7" class="portlet-row ui-sortable">
<p>Some text</p>
</div>
</div>
<div class="portlet" id="port_2">
<div id="chart_8" class="portlet-row ui-sortable">
<p>Some text1</p>
</div>
</div>
<div class="portlet" id="port_3">
<div id="chart_9" class="portlet-row ui-sortable">
<p>Some text11</p>
</div>
</div>
<div class="portlet" id="port_4">
<div id="chart_10" class="portlet-row ui-sortable">
<p>Some text111</p>
</div>
</div>