使用jquery向div添加包装器的最佳方式是什么

Question

你好，我正在尝试add a wrapper class "wrprcls"到下面的html
下面是html-

<span aria-current="page" class="page-numbers current">1</span>
<a class="page-numbers" href="google.com;paged=2">2</a>
<a class="page-numbers" href="google.com&amp;paged=2">2</a>
<a class="next page-numbers" href="google.com;paged=2">Next »</a>

所需-

<div class="wrprcls">
<span aria-current="page" class="page-numbers current">1</span>
<a class="page-numbers" href="google.com;paged=2">2</a>
<a class="page-numbers" href="google.com&amp;paged=2">2</a>
<a class="next page-numbers" href="google.com;paged=2">Next »</a>
</div>

我试过

jQuery( "span.page-numbers.current" ).wrap( "<div class='wrprcls'></div>" );

但它并没有按预期工作。

Answer 1

试试这个

jQuery(".page-numbers").wrapAll("<div class='wrprcls'></div>");

演示-https://jsfiddle.net/vyspiansky/Lvqzkyj1/

Answer 2

你可以这样做：

$("span.page-numbers.current").siblings().addBack().wrapAll("<div class='wrprcls'></div>");

.wrprcls { border: 1px solid pink }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span aria-current="page" class="page-numbers current">1</span>
<a class="page-numbers" href="google.com;paged=2">2</a>
<a class="page-numbers" href="google.com&amp;paged=2">2</a>
<a class="next page-numbers" href="google.com;paged=2">Next »</a>