CODEWITHSUNDEEP
jqueryhtmlcss
wordpress user
wordpress user

Reputation: 584

Wrap elements inside another using classes in jQuery

Is it possible to include two classes within a single class using jquery.
For some reasons i cant edit the html
For example Current html is 

<div class="first">.....</div>
<div class="second">.....</div>
<div class="thrid">.....</div>

What i want is 

<div class="MAIN-CLASS">
    <div class="first">.....</div>
    <div class="second">.....</div>
</div>
<div class="third">...</div>

I want to add MAIN-CLASS using Jquery

Upvotes: 1

Views: 267

Answers (3)

Ahs N
Ahs N

Reputation: 8386

This is how I would do it:

$("div").slice(0,2).wrapAll("<div class='MAIN-CLASS'></div>");

Here is the JSFiddle demo

Upvotes: 2

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28523

You can make use of wrapAll in jquery, see below code

$(function(){
   $('.first, .second').wrapAll('<div class="MAIN_CLASS"></div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="first">.....first</div>
<div class="second">.....second</div>
<div class="thrid">.....thireed</div>

Upvotes: 4

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

You can select the two classes by using:

$(".first, .second");

And then $.wrapAll them to that using:

$(".first, .second").wrapAll('<div class="MAIN-CLASS" />');


$(function(){
   $('.first, .second').wrapAll('<div class="MAIN_CLASS"></div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="first">....</div>
<div class="second">....</div>
<div class="thrid">....</div>

Upvotes: 3

Related Questions