CODEWITHSUNDEEP
jquerywrapall
Federico Della Torre
Federico Della Torre

Reputation: 21

jquery :not(:first-child) wrapAll() each div

I want to select all elements except the first in a div with that class.

Current HTML:

<div class="cpt-cv-content-item">
    <a>...</a>
    <h4>...</h4>
    ...
</div>
<div class="cpt-cv-content-item">
    <a>...</a>
    <h4>...</h4>
    ...
</div>

I tried using wrap all:

$(".pt-cv-content-item :not(:first-child)").wrapAll( "<div class='new'></div>" );

This function select correctly all element except first but moves all of them into the first div.

I want to get like this:

<div class="cpt-cv-content-item">
    <a>...</a>
    <div class='new'>
    <h4>...</h4>
    ...
    </div>
</div>
<div class="cpt-cv-content-item">
    <a>...</a>
    <div class='new'>
    <h4>...</h4>
    ...
    </div>
</div>

Unfortunately I cant edit the html. Thank you in advance

Upvotes: 0

Views: 1770

Answers (3)

Federico Della Torre
Federico Della Torre

Reputation: 21

I selected all elements in '.pt-cv-content-item':

$(".pt-cv-content-item ").wrapInner( "<div class='new'></div>" );

I moved out the first a href in '.pt-cv-content-item' div

$(".new a:first-child").each(function() {
    $(this).parent().before(this);
});

Thank you guys

Upvotes: 0

rrk
rrk

Reputation: 15846

Wrap the whole content, then move the first child out of the .new to main div.

Use wrapInner() to wrap all the children. Use prependTo() move element to starting of an element.

$(".cpt-cv-content-item").wrapInner($("<div class='new'>"));
$('div.new').each(function(){
  $(this).children().first().prependTo($(this).closest(".cpt-cv-content-item"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="cpt-cv-content-item">
    <a>...</a>
    <h4>...</h4>
    ...
</div>
<div class="cpt-cv-content-item">
    <a>...</a>
    <h4>...</h4>
    ...
</div>

Upvotes: 0

mbinette
mbinette

Reputation: 5094

Use wrap instead of wrapAll.

 $(".pt-cv-content-item :not(:first-child)").wrap( "<div class='new'></div>" );

wrap

Description: Wrap an HTML structure around each element in the set of matched elements.

wrapall

Description: Wrap an HTML structure around all elements in the set of matched elements.

Upvotes: 1

Related Questions