Как лучше всего добавить оболочку в div, используя jquery?

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>