javascript - 使用 Jquery 订购附加类

Question

我想问一下，可以订补课吗？例如，在我的 JSFiddle当我附加类(class)时，我想在移动设备上查看 Lorem ipsum dolor sit amet。

这是我的 JQuery

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

附言无法更改 .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>

在处理单组元素(如上所述)时，这种模式可以说是多余的，因为您可以从 ordering 数组中按顺序生成 div 元素，而不是克隆它们然后对它们进行分类。