CODEWITHSUNDEEP
javascriptjqueryhtml
TZP
TZP

Reputation: 53

jQuery: Wrap all elements in one div but not in another div

I got a question about .wrapAll(). So far I got this code:

<div id="firstDivContainer">
  <div class="element">stuff</div>
  <div class="accordion">stuff</div>
  <div class="accordion">stuff</div>
  <div class="accordion">stuff</div>
</div>

<div id="secondDivContainer">
  <div class="element">stuff</div>
  <div class="accordion">stuff</div>
  <div class="accordion">stuff</div>
  <div class="accordion">stuff</div>
  <div class="element">stuff</div>
</div>

and I want another div wrapping the first set of accordions. So I tried it with:

if ($('#firstDivContainer').find('.accordion').length != 0) {
  $(".accordion").wrapAll("<div id='accordionBox' />");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="firstDivContainer">
  <div class="element">stuff</div>
  <div class="accordion">stuff</div>
  <div class="accordion">stuff</div>
  <div class="accordion">stuff</div>
</div>

<div id="secondDivContainer">
  <div class="element">stuff</div>
  <div class="accordion">stuff</div>
  <div class="accordion">stuff</div>
  <div class="accordion">stuff</div>
  <div class="element">stuff</div>
</div>

but he removes the accordions from the second set and adds them to the first set. The result should be:

<div id="firstDivContainer">
  <div class="element">stuff</div>
  <div id="accordionBox">
    <div class="accordion">stuff</div>
    <div class="accordion">stuff</div>
    <div class="accordion">stuff</div>
  </div>
</div>
<div id="secondDivContainer">
  <div class="element">stuff</div>
  <div class="accordion">stuff</div>
  <div class="accordion">stuff</div>
  <div class="accordion">stuff</div>
  <div class="element">stuff</div>
</div>

but instead I got

<div id="firstDivContainer">
  <div class="element">stuff</div>
  <div id="accordionBox">
    <div class="accordion">stuff</div>
    <div class="accordion">stuff</div>
    <div class="accordion">stuff</div>
    <div class="accordion">stuff</div>
    <div class="accordion">stuff</div>
    <div class="accordion">stuff</div>
  </div>
</div>
<div id="secondDivContainer">
  <div class="element">stuff</div>
  <div class="element">stuff</div>
</div>

I guess the solution is just a minor change but I m currently stuck with this dratz.

Upvotes: 0

Views: 344

Answers (2)

George
George

Reputation: 36784

Simply narrow your initial selector, so you are only selecting .accordions inside #firstDivContainer:

$("#firstDivContainer .accordion").wrapAll("<div id='accordionBox' />");


$("#firstDivContainer .accordion").wrapAll("<div id='accordionBox' />");
#accordionBox{
    background: #FCC;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="firstDivContainer">
    <div class="element">stuff</div>
    <div class="accordion">stuff</div>
    <div class="accordion">stuff</div>
    <div class="accordion">stuff</div>
</div>

<div id="secondDivContainer">
    <div class="element">stuff</div>
    <div class="accordion">stuff</div>
    <div class="accordion">stuff</div>
    <div class="accordion">stuff</div>
    <div class="element">stuff</div>
</div>

Upvotes: 3

techfoobar
techfoobar

Reputation: 66663

$("#firstDivContainer .accordion").wrapAll("<div id='accordionBox' />");

should do it.

Upvotes: 1

Related Questions