如何用 div 包装额外的链接？

Question

如果父级 div 中有超过 4 个链接 jQuery:

，我将尝试将链接包装在 div 中

<div class="acclinks">
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">7</a>
  <a href="#">8</a>
</div>

我想成为这样的人：

<div class="acclinks">
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <div class="more">
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
  </div>
</div>

Answer 1

使用 :gt() selector, to select element with index great that specific number. Then use .wrapAll() 将所选元素包装在新的 html 中。

$(".acclinks a:gt(3)").wrapAll("<div class='more'></div>");

$(".acclinks a:gt(3)").wrapAll("<div class='more'></div>");

.more { border: 1px solid red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="acclinks">
   <a href="#">1</a>
   <a href="#">2</a>
   <a href="#">3</a>
   <a href="#">4</a>
   <a href="#">5</a>
   <a href="#">6</a>
   <a href="#">7</a>
   <a href="#">8</a>
</div>

如何用 div 包装额外的链接？

How to wrap additional links with div?

html

javascript

jquery

wrapall