CODEWITHSUNDEEP
javascripthtmljquery
user14058044
user14058044

Reputation:

What is the best way to add wrapper to a div using jquery?

Hello i am trying to add a wrapper class "wrprcls" to the below html
Below is the 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>

Desired -

<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>

I have tried

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

but it did not worked as desired.

Upvotes: 0

Views: 94

Answers (2)

Pranav Rustagi
Pranav Rustagi

Reputation: 2721

You can do it like this :

$("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>

Upvotes: 1

Ihor Vyspiansky
Ihor Vyspiansky

Reputation: 916

Try this

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

Demo - https://jsfiddle.net/vyspiansky/Lvqzkyj1/

Upvotes: 2

Related Questions