Question

我有一个列表

<li>product 1</li>
<li>product 2</li>
<li>product 3</li>
<li>product 4</li>
<li>quickview 1</li>
<li>quickview 2</li>
<li>quickview 3</li>
<li>quickview 4</li>
<li>product 5</li>
<li>product 6</li>
<li>product 7</li>
<li>product 8</li>
<li>quickview 5</li>
<li>quickview 6</li>
<li>quickview 7</li>
<li>quickview 8</li>

我需要重新排序HTML位，以便显示

$('.quickview').appendTo('.last');

依旧......

有没有办法用类做这个？它需要自动检测每4个产品元素，并在其下面添加4个相应的快速浏览。

我使用

创建了一个小提琴here

<g:textField name="discount" value="${discount}"/>
<g:textField name="vat" value="${vat}"/>

（感谢这个问题的答案here）并在第四个产品li中添加了一个“last”类。我确信有一个简单的方法可以用jquery做到这一点，但它逃脱了我。

非常感谢任何帮助！：）谢谢！

Answer 1

您可以使用{/ 3}}，slice和after等功能，例如

$('.last').each(function(index,el){
    $(this).after($('.quickview').slice(index*4,(index+1)*4));
});

var quickviews = $('.order-me .quickview');
$('.order-me .last').each(function(index, el) {
  $(this).after( //insert after current element
    quickviews.slice(index * 4, (index + 1) * 4) //get part from quickviews for current element
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="order-me">
  <li>product 1</li>
  <li>product 2</li>
  <li>product 3</li>
  <li class="last">product 4</li>
  <li>product 5</li>
  <li>product 6</li>
  <li>product 7</li>
  <li class="last">product 8</li>
  <li>product 9</li>
  <li>product 10</li>
  <li>product 11</li>
  <li class="last">product 12</li>
  <li class="quickview">quickview 1</li>
  <li class="quickview">quickview 2</li>
  <li class="quickview">quickview 3</li>
  <li class="quickview">quickview 4</li>
  <li class="quickview">quickview 5</li>
  <li class="quickview">quickview 6</li>
  <li class="quickview">quickview 7</li>
  <li class="quickview">quickview 8</li>
  <li class="quickview">quickview 9</li>
  <li class="quickview">quickview 10</li>
  <li class="quickview">quickview 11</li>
  <li class="quickview">quickview 12</li>
</ul>

使用jquery重新排序列表

1 个答案: