CODEWITHSUNDEEP
jqueryhtml
Andrey Shandrov
Andrey Shandrov

Reputation: 457

how to wrap elements in each divs

I have two block with the same classes in which the content - is the title and description. How to collect all the titles into one div and placed above description.

What I have now

<div class="div">
    <div class="title"></div>
    <p>some text</p>
    <div class="title"></div>
    <p>some text</p>
    <div class="title"></div>
    <p>some text</p>
    <div class="title"></div>
</div>

<div class="div">
    <div class="title"></div>
    <p>some text</p>
    <div class="title"></div>
    <p>some text</p>
    <div class="title"></div>
    <p>some text</p>
    <div class="title"></div>
</div>

want this result -----------------------------------------------

<div class="div">
    <div class="container-for-title">
        <div class="title"></div>
        <div class="title"></div>
        <div class="title"></div>
        <div class="title"></div>
    </div>

    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
</div>

<div class="div">
    <div class="container-for-title">
        <div class="title"></div>
        <div class="title"></div>
        <div class="title"></div>
        <div class="title"></div>
    </div>

    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
</div>

Upvotes: 2

Views: 33

Answers (1)

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67217

You can do it by using wrapAll(),

$(".div").each(function() {
  $(".title", this).wrapAll($("<div>", {
    class: "container-for-title"
  }));
});

DEMO

Upvotes: 2

Related Questions