javascript - 如何用 div 包装附加链接？

Question

如果使用 jQuery 的父 div 中有超过 4 个链接，我正在尝试将链接包装在 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()选择器，选择索引大于特定数字的元素。然后用于.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>