[英]Get all data attribute order of HTML elements
In the #content
div, there are blocks that user can drag them and sort them. 在#content
div中,用户可以拖动它们并对它们进行排序。 Each block may contain many nodes. 每个块可以包含许多节点。 Under each block, the are element that contains " data-node-id
" attribute. 在每个块下,是包含“ data-node-id
”属性的are元素。 i want to make a function that will get the order after drag-sort. 我想做一个功能,将拖动排序后得到的顺序。 this function can run from a click button (does not have to run for every sort-change). 此功能可以通过单击按钮运行(不必每次更改都运行)。
Here is my page: http://orbitcoins.website/demos/demo%20-%20json_nodes_diagram/nodes_diagram_serverfile.php 这是我的页面: http : //orbitcoins.website/demos/demo%20-%20json_nodes_diagram/nodes_diagram_serverfile.php
So let's say, i have elements in this order: 所以说,我的顺序是这样的:
order = {1,2,3,4,5}//block1:{1}, block2:{2}, block3:{3,4,5}
after changing the order of the second and the third block, When running this function, we will get this result: 更改第二个和第三个块的顺序之后,运行此函数时,我们将得到以下结果:
new_order = {1,3,4,5,2}//block1:{1}, block2:{3,4,5}, block3:{2}
There is no difference when using JQuery or JavaScript. 使用JQuery或JavaScript时没有任何区别。
Well, @Andreas has posted the solution in the comment: 好吧,@ Andreas在评论中发布了解决方案:
$("[data-node-id]").map(function() { return +this.getAttribute("data-node-id"); }).get()
This solution seems perfect to me! 这个解决方案对我来说似乎很完美! it do exactly what i wanted to. 它正是我想要的。
Credit Goes to @Andreas . 信用转到@Andreas。
With this snippet, you can check all blocks in the order you defined and get the contained values at the end of the execution: 使用此代码段,您可以按定义的顺序检查所有块,并在执行结束时获取包含的值:
// all the blocks you have
$blocks = array(1, 2, 3);
// all the elements they contain
$blocks[1] = array(1);
$blocks[2] = array(2);
$blocks[3] = array(345);
// the new block order you will get
$new_order = array(1, 3, 2);
// initialize the new blocks order
$new_blocks = array();
// for every block of the new order
foreach ($new_order as $block) {
// add to the new blocks order the content of that block
array_push($new_blocks, $blocks[$block]);
}
// for each new block obtained
foreach ($new_blocks as $block) {
// and for every node inside
foreach ($block as $item) {
// print it out
var_dump($item);
}
}
// new_blocks is the structure you are searching for
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.