收集-元素的顺序

Question

我正在编写一段代码，其中用户可以根据自己的意愿更改span元素的顺序。我需要收集span元素的顺序，并将其放入一个变量中，例如，如果顺序如下：

<span id="span-2">[<a class="move-up">Up</a>/<a class="move-down">Down</a>]</span>
<span id="span-3">[<a class="move-up">Up</a>/<a class="move-down">Down</a>]</span>
<span id="span-5">[<a class="move-up">Up</a>/<a class="move-down">Down</a>]</span>
<span id="span-4">[<a class="move-up">Up</a>/<a class="move-down">Down</a>]</span>
<span id="span-1">[<a class="move-up">Up</a>/<a class="move-down">Down</a>]</span>

然后，变量将是"2,3,5,4,1“

Answer 1

如果存在可识别的父级，您可以这样做：

var order = new Array();
$("#parentID span").each(function(){
    order.push($(this).attr('id').substring(5));
});

但是，如果我要尝试这样做，我会添加一些classes和data-id：

HTML：

<span class="mySpan" data-id="2" id="span-2">[<a class="move-up">Up</a>/<a class="move-down">Down</a>]</span>
<span class="mySpan" data-id="3" id="span-3">[<a class="move-up">Up</a>/<a class="move-down">Down</a>]</span>
<span class="mySpan" data-id="5" id="span-5">[<a class="move-up">Up</a>/<a class="move-down">Down</a>]</span>
<span class="mySpan" data-id="4" id="span-4">[<a class="move-up">Up</a>/<a class="move-down">Down</a>]</span>
<span class="mySpan" data-id="1" id="span-1">[<a class="move-up">Up</a>/<a class="move-down">Down</a>]</span>

JS：

var order = new Array();
$(".mySpan").each(function(){
    order.push($(this).attr('data-id'));
});

Answer 2

var ids = [];
$("span").each(function(index) {
    ids.push($(this).attr('id'));
});

并且您将在数组in中包含in。对于您的示例，它将是ids = "span-2"，"span-3"，"span-5"，"span-4"，"span-1“

Answer 3

用于获取跨度本身：

var spanArray = []; //Contain all spans in the proper order (2,3,5,4,1)

$("span").each(function(i){
     spanArray.push($("span")[i]);
     console.log(i + ": " + this.id);
});

对于仅获取span ids：

var spanIDsArray = []; //Contain all span ids in the proper order (2,3,5,4,1)

$("span").each(function(i){
     spanIDsArray.push(this.id);
     console.log(i + ": " + this.id);
});