Question

我有9个HTML div：

<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>


<div id="9">9</div>

现在HTML中的序列是：（id）1 2 3 4 5 6 7 8 9

可以重新排列这些div以获取DOM中的任何顺序。

交换DOM之后说如下：

<div id="8">8</div>
<div id="2">2</div>
<div id="5">5</div>


<div id="1">1</div>

（交换/重新排序后）现在HTML中的序列是：（id）8 2 5 3 4 7 9 6 1

我希望在一个范围内获得div的订单（8 2 5 3 4 7 9 6 1）。

<div id="show">Now the sequence is <span id="seq"> </span></div>

Answer 1

使用 map() 方法并执行类似

的操作

＆＃13;

$('#seq').text(
  $('#parent div') // get the swapped divs
  .map(function() { // iterate over them to generate an array
    return this.id // return id for array element
  }).get() // get result as an array
  .join(' ') // join the array element 
);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="8">8</div>
  <div id="2">2</div>
  <div id="5">5</div>
  <div id="1">1</div>
</div>
<div id="show">Now the sequence is <span id="seq"> </span>
</div>

＆＃13;

Answer 2

使用公共类来获取所需的所有div。然后使用each获取文本（或ID）并形成一个字符串并将其附加到dom

<强> HTML

<div id="8" class="sqDiv">8</div>
<div id="2" class="sqDiv">2</div>
<div id="5" class="sqDiv">5</div>
<div id="1" class="sqDiv">1</div>
<span id="sqDom"></span>

JS

var _sq="";
var getDivs = $(".sqDiv");
getDivs.each(function(item,index){

 _sq+=$(this).text().trim()+' ';
})
$("#sqDom").text(_sq);

JSFIDDLE

Answer 3

我就这样做了：

$("ul div").each(function(){
   $("#seq").text($("#seq").text() + $(this).attr("id") + " ");
});

Here is the JSFiddle demo

Answer 4

您好试试这个https://plnkr.co/edit/FxemUZMAmEqo2oXvvMXN?p=preview

<强> JS

var IDs2 = [];
$("#swapping").find("div").each(function(){ IDs2.push(this.id); });
$("#seq2").html(IDs2)

<强> HTML

<div id="swapping"> 
<div id="8">8</div>
<div id="2">2</div>
<div id="5">5</div>
<div id="4">4</div>
<div id="3">3</div>
<div id="2">2</div>
<div id="1">1</div>
</div>
<div id="show2">Now the sequence is <span id="seq2"> </span></div>

Answer 5

我使用$ .each循环，

HTML CODE

<div id="8">8</div>
<div id="2">2</div>
<div id="5">5</div>
<div id="1">1</div>
<div id="show">Now the sequence is <span id="seq"> </span></div>

<强> Jquery的

var divs=[];var seq=[];
divs=$("div");
$.each(divs,function(k,v){
if($(v).attr('id')!='show')
{
seq[k]=$(v).attr('id');
}
})
$('#seq').text(seq);

Jsfiddle Example

从html获取div的序列

5 个答案: