Question

我想问一下，这可以订购附加课吗？例如，在我的CountDownLatch我希望在移动时看到 Lorem ipsum dolor sit amet ，当我附加课程时。

我的JQuery

$(".cont-1, .cont-2, .cont-3, .cont-4").clone().prependTo(".mobile-content");

P.S。我无法在.content

中更改课程顺序

Answer 1

在单个选择器中没有办法做到这一点，因为元素通常是在DOM中找到的（虽然它本身也不能保证）。

如果您想影响他们的订单，则需要sort()元素。给定您的示例，您需要创建一个数组，该数组以正确的顺序保存值，然后您可以使用它来比较sort()方法中的索引，如下所示：

$(".cont-1, .cont-2, .cont-3, .cont-4").clone().prependTo(".mobile-content");

var ordering = ['lorem', 'ipsum', 'dolor', 'sit amet'];
$('.mobile-content div').sort(function(a, b) {
  return ordering.indexOf(a.innerText.trim().toLowerCase()) - ordering.indexOf(b.innerText.trim().toLowerCase());
}).appendTo('.mobile-content');

div.content > div {
  display: inline
}
div.mobile-content > div {
  display: inline;
  margin: 0 5px 0 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Original look:<br />
<div class="content">
  <div class="cont-2">ipsum</div>
  <div class="cont-1">Lorem</div>
  <div class="cont-4">sit amet</div>
  <div class="cont-3">dolor</div>
</div><br />

Mobile look:<br />
<div class="mobile-content"></div>

当处理单个元素集（如上所述）时，这种模式可能会多余，因为您可以从div数组按顺序生成ordering元素，而不是克隆它们然后排序它们。

Answer 2

您可以使用一组选择器，并逐个前置

['.cont-1', '.cont-2', '.cont-3', '.cont-4'].reverse().forEach(function(s) {
	$(s).clone().prependTo(".mobile-content");
});

div.content>div{display:inline}
div.mobile-content>div{display:inline;margin:0 5px 0 0}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Original look:<br />
<div class="content">
  <div class="cont-2">ipsum</div>
  <div class="cont-1">Lorem</div>
  <div class="cont-4">sit amet</div>
  <div class="cont-3">dolor</div>
</div>
<br />Mobile look:<br />
<div class="mobile-content">
  
</div>

或按类名

排序

$(".cont-1, .cont-2, .cont-3, .cont-4").clone().sort( (a,b) => 
	a.className.localeCompare(b.className)
).prependTo(".mobile-content");

div.content>div{display:inline}
div.mobile-content>div{display:inline;margin:0 5px 0 0}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Original look:<br />
<div class="content">
  <div class="cont-2">ipsum</div>
  <div class="cont-1">Lorem</div>
  <div class="cont-4">sit amet</div>
  <div class="cont-3">dolor</div>
</div>
<br />Mobile look:<br />
<div class="mobile-content">
  
</div>

使用Jquery对附加的类进行排序

2 个答案: