How do I wrap some child elements in a parent div when the parent div is a repeating element

  Kiến thức lập trình

I have a repeating set of divs, I don’t know how many of these there will be. Within each div there is some content and I want to wrap 2 specific a tags in a div for each parent div

Current markup:

<div class="item">
    <p>text</p>
    <a class="link-a">link a</a>
    <a class="link-b">link a</a>
    <a class="link-c">link a</a>
</div>

<div class="item">
    <p>text</p>
    <a class="link-a">link a</a>
    <a class="link-b">link a</a>
    <a class="link-c">link a</a>
</div>

<div class="item">
    <p>text</p>
    <a class="link-a">link a</a>
    <a class="link-b">link a</a>
    <a class="link-c">link a</a>
</div>

… and so on

Desired markup:

<div class="item">
    <p>text</p>
    <a class="link-a">link a</a>
    <div class="wrapped">
        <a class="link-b">link a</a>
        <a class="link-c">link a</a>
    </div>
</div>

<div class="item">
    <p>text</p>
    <a class="link-a">link a</a>
    <div class="wrapped">
        <a class="link-b">link a</a>
        <a class="link-c">link a</a>
    </div>
</div>

<div class="item">
    <p>text</p>
    <a class="link-a">link a</a>
    <div class="wrapped">
        <a class="link-b">link a</a>
        <a class="link-c">link a</a>
    </div>
</div>

… and so on

I have tried this:

$('.item .link-b, .item .link-c').wrapAll('<div class="wrapped" />');

But that results in all the links being wrapped in one div.wrapped in the first item.

  • jquery

LEAVE A COMMENT