CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rebecca O'Riordan
Rebecca O'Riordan

Reputation: 883

Wrap two different elements in the same div to all classes with jQuery?

I want the following:

<div class="contents"></div>
<div class="contents"></div>
<div class="contents">
  <span><h3></h3></span>
  <span><img></span>
  <span><p></span>
</div>

To look like this:

<div class="contents">
  <div>
    <span><h3></h3></span>
    <span><img></span>
  </div>
  <span><p></span>
</div>

for each of the contents classes. My code:

var contents = $('.page').find('.contents');

var nestedContents = contents.find('span:nth-child(1)');
nestedContents.attr("id", 'h3-location');

var imgContents = contents.find('span:nth-child(2)');
imgContents.attr("id", 'img-location');

$('#img-location, #h3-location').wrap('<div class="groupedContent"></div>');

But all this is doing is wrapping the img and h3 spans in separate groupedContent divs. I have tried wrapAll and it takes ALL the img and h3 spans in the document and puts them in the one groupedContent div in the FIRST contents class. I can't put the img and h3 spans inside the one groupedContent div within each contents class.

Upvotes: 1

Views: 2598

Answers (4)

BLoB
BLoB

Reputation: 9725

Here's a JSFiddle... https://jsfiddle.net/h2awu27c/2/

With HTML code like so...

<div class="contents"></div>
<div class="contents"></div>
<div class="contents">
    <span><h3 id="h3-location">The H3</h3></span>
    <span><img id="img-location" /></span>
    <span><p>asd</p></span>
</div>
<div class="contents">
    <span><h3 id="h3-location">The H3 2</h3></span>
    <span><img id="img-location" /></span>
    <span><p>asd 2</p></span>
</div>
<div class="contents"></div>

To achieve with JS / Jquery, i.e. remove empty .contents divs and wrap the children h3 and img tag inside a groupedContent div:

<div class="contents">
    <div class="groupedContent">
        <span><h3 id="h3-location">The H3</h3></span>
        <span><img id="img-location" /></span>
    </div>
    <span><p>asd</p></span>
</div>
<div class="contents">
    <div class="groupedContent">
        <span><h3 id="h3-location">The H3 2</h3></span>
        <span><img id="img-location" /></span>
    </div>
    <span><p>asd 2</p></span>
</div>

Use:

$('.contents').each(function() {
    var $contents = $(this);

    if ($contents.is(':empty')) { 
        $contents.remove();
    }
    else
    {
        $contents.children('span:has(h3),span:has(img)').wrapAll('<div class="groupedContent"></div>');
    }
})

Upvotes: 1

robjez
robjez

Reputation: 3788

If I understood your request well, you need this:

JS: 

var page = $('.page'),
    $contents = page.find('.contents:has(span)').contents(),
    item = $contents.wrapAll('<div class="groupedContent"></div>');

$('.groupedContent').clone().appendTo(page.find('.contents:empty'));

HTML: 

<div class="page">
    <div class="contents"></div>
    <div class="contents"></div>
    <div class="contents"> 
     <span><h3>H3</h3></span>
     <span><img src="#"/></span>
     <span><p>P</p></span>
    </div>
</div>

So you take a content of a div which :has a span, and wrapping it in another div.groupedContent. Then you are cloning this wrapped content and appending it to the rest of .contents elements (:empty divs).

JSFiddle

Hope this helps

Upvotes: 0

StuperUser
StuperUser

Reputation: 10850

Use WrapAll() for the div.content rather than .Wrap(), then select the h3 and img parent span tags again and wrapAll those:

$('div.contents span:nth-child(1),div.contents span:nth-child(2)').wrapAll('<div></div>')

https://jsfiddle.net/x9asccrb/

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You can use .wrapAll() like below

$('.page .contents').each(function() {
  var $contents = $(this);
  $contents.children('span:has(h3),span:has(img)').wrapAll('<div class="groupedContent"></div>')
})
.contents {
  border: 1px solid red;
  padding: 5px;
}
.groupedContent {
  border: 1px solid green;
  padding: 5px;
}
span {
  border: 1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="page">
  <div class="contents">
    <span><h3></h3></span>
    <span><img src=""/></span>
    <span><p>some p</p>?</span>
  </div>
  <div class="contents">
    <span><h3></h3></span>
    <span><img src=""/></span>
    <span><p>some p</p>?</span>
  </div>
  <div class="contents">
    <span><h3></h3></span>
    <span><img src=""/></span>
    <span><p>some p</p>?</span>
  </div>
</div>

Note: Your html is invalid, span can't have p as its descendant

Upvotes: 0

Related Questions