jQuery/js wrap near div with same classes into single divUsing jQuery to center a DIV on the screenCreating a div element in jQueryHow can I select an element with multiple classes in jQuery?Get class list for element with jQueryHow to replace innerHTML of a div using jQuery?Use jQuery to hide a DIV when the user clicks outside of itjQuery multiple events to trigger the same functionjQuery to loop through elements with the same classHTML5 best practices; section/header/aside/article elementsWrapping multiple elements in a div using jQuery
How can I deal with my CEO asking me to hire someone with a higher salary than me, a co-founder?
How does a refinance allow a mortgage to be repaid?
How to Prove P(a) → ∀x(P(x) ∨ ¬(x = a)) using Natural Deduction
Can a virus destroy the BIOS of a modern computer?
Placement of More Information/Help Icon button for Radio Buttons
Does the Idaho Potato Commission associate potato skins with healthy eating?
Was the Stack Exchange "Happy April Fools" page fitting with the '90's code?
Finitely generated matrix groups whose eigenvalues are all algebraic
What are the G forces leaving Earth orbit?
How can saying a song's name be a copyright violation?
Sums of two squares in arithmetic progressions
What is the fastest integer factorization to break RSA?
Is it a bad idea to plug the other end of ESD strap to wall ground?
Do creatures with a listed speed of "0 ft., fly 30 ft. (hover)" ever touch the ground?
Could the museum Saturn V's be refitted for one more flight?
Are British MPs missing the point, with these 'Indicative Votes'?
Rotate ASCII Art by 45 Degrees
What exactly is ineptocracy?
Why do I get negative height?
Am I breaking OOP practice with this architecture?
Why was Sir Cadogan fired?
Is this draw by repetition?
OP Amp not amplifying audio signal
How badly should I try to prevent a user from XSSing themselves?
jQuery/js wrap near div with same classes into single div
Using jQuery to center a DIV on the screenCreating a div element in jQueryHow can I select an element with multiple classes in jQuery?Get class list for element with jQueryHow to replace innerHTML of a div using jQuery?Use jQuery to hide a DIV when the user clicks outside of itjQuery multiple events to trigger the same functionjQuery to loop through elements with the same classHTML5 best practices; section/header/aside/article elementsWrapping multiple elements in a div using jQuery
6
I have the following structure and I need to wrap the div around .item.
In some place there is two items and in some place there is single item:
<div class="section">
<div class="heading"></div>
<div class="item"></div>
<div class="item"></div>
<div class="heading"></div>
<div class="item"></div>
<div class="item"></div>
<div class="heading"></div>
<div class="item"></div>
<div class="heading"></div>
<div class="item"></div>
<div class="item"></div>
</div>
I need output in this format:
<div class="section">
<div class="heading"></div>
<div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="heading"></div>
<div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="heading"></div>
<div>
<div class="item"></div>
</div>
<div class="heading"></div>
<div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
I tried with the following code but it wraps all code to single class.
var classes = ;
$(".section > div").each(function()
classes[$(this).attr("class")] = true;
);
for (singleClass in classes)
$("." + singleClass).wrapAll('<div class="item" />');
javascript jquery html jquery-selectors
edited yesterday
Kamil Kiełczewski
13.9k87397
asked yesterday
MukeyshMukeysh
74110
add a comment |
6
I have the following structure and I need to wrap the div around .item.
In some place there is two items and in some place there is single item:
<div class="section">
<div class="heading"></div>
<div class="item"></div>
<div class="item"></div>
<div class="heading"></div>
<div class="item"></div>
<div class="item"></div>
<div class="heading"></div>
<div class="item"></div>
<div class="heading"></div>
<div class="item"></div>
<div class="item"></div>
</div>
I need output in this format:
<div class="section">
<div class="heading"></div>
<div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="heading"></div>
<div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="heading"></div>
<div>
<div class="item"></div>
</div>
<div class="heading"></div>
<div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
I tried with the following code but it wraps all code to single class.
var classes = ;
$(".section > div").each(function()
classes[$(this).attr("class")] = true;
);
for (singleClass in classes)
$("." + singleClass).wrapAll('<div class="item" />');
javascript jquery html jquery-selectors
edited yesterday
Kamil Kiełczewski
13.9k87397
asked yesterday
MukeyshMukeysh
74110
add a comment |
6
6
6
I have the following structure and I need to wrap the div around .item.
In some place there is two items and in some place there is single item:
<div class="section">
<div class="heading"></div>
<div class="item"></div>
<div class="item"></div>
<div class="heading"></div>
<div class="item"></div>
<div class="item"></div>
<div class="heading"></div>
<div class="item"></div>
<div class="heading"></div>
<div class="item"></div>
<div class="item"></div>
</div>
I need output in this format:
<div class="section">
<div class="heading"></div>
<div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="heading"></div>
<div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="heading"></div>
<div>
<div class="item"></div>
</div>
<div class="heading"></div>
<div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
I tried with the following code but it wraps all code to single class.
var classes = ;
$(".section > div").each(function()
classes[$(this).attr("class")] = true;
);
for (singleClass in classes)
$("." + singleClass).wrapAll('<div class="item" />');
javascript jquery html jquery-selectors
edited yesterday
Kamil Kiełczewski
13.9k87397
asked yesterday
MukeyshMukeysh
74110
I have the following structure and I need to wrap the div around .item.
In some place there is two items and in some place there is single item:
<div class="section">
<div class="heading"></div>
<div class="item"></div>
<div class="item"></div>
<div class="heading"></div>
<div class="item"></div>
<div class="item"></div>
<div class="heading"></div>
<div class="item"></div>
<div class="heading"></div>
<div class="item"></div>
<div class="item"></div>
</div>
I need output in this format:
<div class="section">
<div class="heading"></div>
<div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="heading"></div>
<div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="heading"></div>
<div>
<div class="item"></div>
</div>
<div class="heading"></div>
<div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
I tried with the following code but it wraps all code to single class.
var classes = ;
$(".section > div").each(function()
classes[$(this).attr("class")] = true;
);
for (singleClass in classes)
$("." + singleClass).wrapAll('<div class="item" />');
javascript jquery html jquery-selectors
javascript jquery html jquery-selectors
edited yesterday
Kamil Kiełczewski
13.9k87397
asked yesterday
MukeyshMukeysh
74110
edited yesterday
Kamil Kiełczewski
13.9k87397
asked yesterday
MukeyshMukeysh
74110
edited yesterday
Kamil Kiełczewski
13.9k87397
edited yesterday
Kamil Kiełczewski
13.9k87397
edited yesterday
Kamil Kiełczewski
13.9k87397
13.9k87397
asked yesterday
MukeyshMukeysh
74110
asked yesterday
MukeyshMukeysh
74110
asked yesterday
MukeyshMukeysh
74110
74110
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
4
Loop through .heading elements using .each() and in loop select .item that is next to each other using .nextUntil() and then wrap them using .wrapAll()
$(".heading").each(function()
$(this).nextUntil(".heading").wrapAll("<div></div>");
);.heading + div background: #ccc<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
<div class="heading">heading</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="heading">heading</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="heading">heading</div>
<div class="item">item</div>
<div class="heading">heading</div>
<div class="item">item</div>
<div class="item">item</div>
</div>answered yesterday
MohammadMohammad
16k123766
Maybe add a way to actually see the output...
– Jack Bashford
yesterday
add a comment |
2
try
let h,s= document.querySelector('.section');
[...s.children].forEach(e=>
if(e.className=='heading')
h=document.createElement("div")
e.insertAdjacentElement('afterend',h)
else
h.appendChild(e)
)
function change()
let h,s= document.querySelector('.section');
[...s.children].forEach(e=>
if(e.className=='heading')
h=document.createElement("div")
e.insertAdjacentElement('afterend',h)
else
h.appendChild(e)
)
div margin-left: 30px;<button onclick="change()">Click here to change</button>
<div class="section">
<div class="heading">head 1</div>
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="heading">head 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="heading">head 3</div>
<div class="item">item 5</div>
<div class="heading">head 4</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
</div>answered yesterday
Kamil KiełczewskiKamil Kiełczewski
13.9k87397
Your code put.items in.section
– Mohammad
yesterday
@Mohammad no - check in chrome console
– Kamil Kiełczewski
yesterday
Also doesn't work as OP want
– Mohammad
yesterday
I correct answer
– Kamil Kiełczewski
yesterday
add a comment |
-1
- Use nextUntil() with warpAll()
$(".heading").each(function()
$(this).nextUntil(".heading").wrapAll("<div class='red'></div>")
);.red
border: red 1px solid
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
<div class="heading">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="heading">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="heading">7</div>
<div class="item">8</div>
<div class="heading">9</div>
<div class="item">0</div>
<div class="item">-</div>
</div>answered yesterday
guradioguradio
13.9k32339
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55448748%2fjquery-js-wrap-near-div-with-same-classes-into-single-div%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
4
Loop through .heading elements using .each() and in loop select .item that is next to each other using .nextUntil() and then wrap them using .wrapAll()
$(".heading").each(function()
$(this).nextUntil(".heading").wrapAll("<div></div>");
);.heading + div background: #ccc<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
<div class="heading">heading</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="heading">heading</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="heading">heading</div>
<div class="item">item</div>
<div class="heading">heading</div>
<div class="item">item</div>
<div class="item">item</div>
</div>answered yesterday
MohammadMohammad
16k123766
Maybe add a way to actually see the output...
– Jack Bashford
yesterday
add a comment |
4
Loop through .heading elements using .each() and in loop select .item that is next to each other using .nextUntil() and then wrap them using .wrapAll()
$(".heading").each(function()
$(this).nextUntil(".heading").wrapAll("<div></div>");
);.heading + div background: #ccc<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
<div class="heading">heading</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="heading">heading</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="heading">heading</div>
<div class="item">item</div>
<div class="heading">heading</div>
<div class="item">item</div>
<div class="item">item</div>
</div>answered yesterday
MohammadMohammad
16k123766
Maybe add a way to actually see the output...
– Jack Bashford
yesterday
add a comment |
4
4
4
Loop through .heading elements using .each() and in loop select .item that is next to each other using .nextUntil() and then wrap them using .wrapAll()
$(".heading").each(function()
$(this).nextUntil(".heading").wrapAll("<div></div>");
);.heading + div background: #ccc<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
<div class="heading">heading</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="heading">heading</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="heading">heading</div>
<div class="item">item</div>
<div class="heading">heading</div>
<div class="item">item</div>
<div class="item">item</div>
</div>answered yesterday
MohammadMohammad
16k123766
Loop through .heading elements using .each() and in loop select .item that is next to each other using .nextUntil() and then wrap them using .wrapAll()
$(".heading").each(function()
$(this).nextUntil(".heading").wrapAll("<div></div>");
);.heading + div background: #ccc<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
<div class="heading">heading</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="heading">heading</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="heading">heading</div>
<div class="item">item</div>
<div class="heading">heading</div>
<div class="item">item</div>
<div class="item">item</div>
</div>$(".heading").each(function()
$(this).nextUntil(".heading").wrapAll("<div></div>");
);.heading + div background: #ccc<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
<div class="heading">heading</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="heading">heading</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="heading">heading</div>
<div class="item">item</div>
<div class="heading">heading</div>
<div class="item">item</div>
<div class="item">item</div>
</div>$(".heading").each(function()
$(this).nextUntil(".heading").wrapAll("<div></div>");
);.heading + div background: #ccc<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
<div class="heading">heading</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="heading">heading</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="heading">heading</div>
<div class="item">item</div>
<div class="heading">heading</div>
<div class="item">item</div>
<div class="item">item</div>
</div>answered yesterday
MohammadMohammad
16k123766
edited yesterday
answered yesterday
MohammadMohammad
16k123766
answered yesterday
MohammadMohammad
16k123766
answered yesterday
MohammadMohammad
16k123766
16k123766
Maybe add a way to actually see the output...
– Jack Bashford
yesterday
add a comment |
Maybe add a way to actually see the output...
– Jack Bashford
yesterday
Maybe add a way to actually see the output...
– Jack Bashford
yesterday
Maybe add a way to actually see the output...
– Jack Bashford
yesterday
add a comment |
2
try
let h,s= document.querySelector('.section');
[...s.children].forEach(e=>
if(e.className=='heading')
h=document.createElement("div")
e.insertAdjacentElement('afterend',h)
else
h.appendChild(e)
)
function change()
let h,s= document.querySelector('.section');
[...s.children].forEach(e=>
if(e.className=='heading')
h=document.createElement("div")
e.insertAdjacentElement('afterend',h)
else
h.appendChild(e)
)
div margin-left: 30px;<button onclick="change()">Click here to change</button>
<div class="section">
<div class="heading">head 1</div>
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="heading">head 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="heading">head 3</div>
<div class="item">item 5</div>
<div class="heading">head 4</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
</div>answered yesterday
Kamil KiełczewskiKamil Kiełczewski
13.9k87397
Your code put.items in.section
– Mohammad
yesterday
@Mohammad no - check in chrome console
– Kamil Kiełczewski
yesterday
Also doesn't work as OP want
– Mohammad
yesterday
I correct answer
– Kamil Kiełczewski
yesterday
add a comment |
2
try
let h,s= document.querySelector('.section');
[...s.children].forEach(e=>
if(e.className=='heading')
h=document.createElement("div")
e.insertAdjacentElement('afterend',h)
else
h.appendChild(e)
)
function change()
let h,s= document.querySelector('.section');
[...s.children].forEach(e=>
if(e.className=='heading')
h=document.createElement("div")
e.insertAdjacentElement('afterend',h)
else
h.appendChild(e)
)
div margin-left: 30px;<button onclick="change()">Click here to change</button>
<div class="section">
<div class="heading">head 1</div>
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="heading">head 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="heading">head 3</div>
<div class="item">item 5</div>
<div class="heading">head 4</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
</div>answered yesterday
Kamil KiełczewskiKamil Kiełczewski
13.9k87397
Your code put.items in.section
– Mohammad
yesterday
@Mohammad no - check in chrome console
– Kamil Kiełczewski
yesterday
Also doesn't work as OP want
– Mohammad
yesterday
I correct answer
– Kamil Kiełczewski
yesterday
add a comment |
2
2
2
try
let h,s= document.querySelector('.section');
[...s.children].forEach(e=>
if(e.className=='heading')
h=document.createElement("div")
e.insertAdjacentElement('afterend',h)
else
h.appendChild(e)
)
function change()
let h,s= document.querySelector('.section');
[...s.children].forEach(e=>
if(e.className=='heading')
h=document.createElement("div")
e.insertAdjacentElement('afterend',h)
else
h.appendChild(e)
)
div margin-left: 30px;<button onclick="change()">Click here to change</button>
<div class="section">
<div class="heading">head 1</div>
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="heading">head 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="heading">head 3</div>
<div class="item">item 5</div>
<div class="heading">head 4</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
</div>answered yesterday
Kamil KiełczewskiKamil Kiełczewski
13.9k87397
try
let h,s= document.querySelector('.section');
[...s.children].forEach(e=>
if(e.className=='heading')
h=document.createElement("div")
e.insertAdjacentElement('afterend',h)
else
h.appendChild(e)
)
function change()
let h,s= document.querySelector('.section');
[...s.children].forEach(e=>
if(e.className=='heading')
h=document.createElement("div")
e.insertAdjacentElement('afterend',h)
else
h.appendChild(e)
)
div margin-left: 30px;<button onclick="change()">Click here to change</button>
<div class="section">
<div class="heading">head 1</div>
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="heading">head 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="heading">head 3</div>
<div class="item">item 5</div>
<div class="heading">head 4</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
</div>function change()
let h,s= document.querySelector('.section');
[...s.children].forEach(e=>
if(e.className=='heading')
h=document.createElement("div")
e.insertAdjacentElement('afterend',h)
else
h.appendChild(e)
)
div margin-left: 30px;<button onclick="change()">Click here to change</button>
<div class="section">
<div class="heading">head 1</div>
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="heading">head 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="heading">head 3</div>
<div class="item">item 5</div>
<div class="heading">head 4</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
</div>function change()
let h,s= document.querySelector('.section');
[...s.children].forEach(e=>
if(e.className=='heading')
h=document.createElement("div")
e.insertAdjacentElement('afterend',h)
else
h.appendChild(e)
)
div margin-left: 30px;<button onclick="change()">Click here to change</button>
<div class="section">
<div class="heading">head 1</div>
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="heading">head 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="heading">head 3</div>
<div class="item">item 5</div>
<div class="heading">head 4</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
</div>answered yesterday
Kamil KiełczewskiKamil Kiełczewski
13.9k87397
edited yesterday
answered yesterday
Kamil KiełczewskiKamil Kiełczewski
13.9k87397
answered yesterday
Kamil KiełczewskiKamil Kiełczewski
13.9k87397
answered yesterday
Kamil KiełczewskiKamil Kiełczewski
13.9k87397
13.9k87397
Your code put.items in.section
– Mohammad
yesterday
@Mohammad no - check in chrome console
– Kamil Kiełczewski
yesterday
Also doesn't work as OP want
– Mohammad
yesterday
I correct answer
– Kamil Kiełczewski
yesterday
add a comment |
Your code put.items in.section
– Mohammad
yesterday
@Mohammad no - check in chrome console
– Kamil Kiełczewski
yesterday
Also doesn't work as OP want
– Mohammad
yesterday
I correct answer
– Kamil Kiełczewski
yesterday
Your code put
.items in .section– Mohammad
yesterday
Your code put
.items in .section– Mohammad
yesterday
@Mohammad no - check in chrome console
– Kamil Kiełczewski
yesterday
@Mohammad no - check in chrome console
– Kamil Kiełczewski
yesterday
Also doesn't work as OP want
– Mohammad
yesterday
Also doesn't work as OP want
– Mohammad
yesterday
I correct answer
– Kamil Kiełczewski
yesterday
I correct answer
– Kamil Kiełczewski
yesterday
add a comment |
-1
- Use nextUntil() with warpAll()
$(".heading").each(function()
$(this).nextUntil(".heading").wrapAll("<div class='red'></div>")
);.red
border: red 1px solid
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
<div class="heading">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="heading">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="heading">7</div>
<div class="item">8</div>
<div class="heading">9</div>
<div class="item">0</div>
<div class="item">-</div>
</div>answered yesterday
guradioguradio
13.9k32339
add a comment |
-1
- Use nextUntil() with warpAll()
$(".heading").each(function()
$(this).nextUntil(".heading").wrapAll("<div class='red'></div>")
);.red
border: red 1px solid
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
<div class="heading">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="heading">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="heading">7</div>
<div class="item">8</div>
<div class="heading">9</div>
<div class="item">0</div>
<div class="item">-</div>
</div>answered yesterday
guradioguradio
13.9k32339
add a comment |
-1
-1
-1
- Use nextUntil() with warpAll()
$(".heading").each(function()
$(this).nextUntil(".heading").wrapAll("<div class='red'></div>")
);.red
border: red 1px solid
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
<div class="heading">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="heading">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="heading">7</div>
<div class="item">8</div>
<div class="heading">9</div>
<div class="item">0</div>
<div class="item">-</div>
</div>answered yesterday
guradioguradio
13.9k32339
- Use nextUntil() with warpAll()
$(".heading").each(function()
$(this).nextUntil(".heading").wrapAll("<div class='red'></div>")
);.red
border: red 1px solid
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
<div class="heading">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="heading">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="heading">7</div>
<div class="item">8</div>
<div class="heading">9</div>
<div class="item">0</div>
<div class="item">-</div>
</div>$(".heading").each(function()
$(this).nextUntil(".heading").wrapAll("<div class='red'></div>")
);.red
border: red 1px solid
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
<div class="heading">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="heading">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="heading">7</div>
<div class="item">8</div>
<div class="heading">9</div>
<div class="item">0</div>
<div class="item">-</div>
</div>$(".heading").each(function()
$(this).nextUntil(".heading").wrapAll("<div class='red'></div>")
);.red
border: red 1px solid
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
<div class="heading">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="heading">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="heading">7</div>
<div class="item">8</div>
<div class="heading">9</div>
<div class="item">0</div>
<div class="item">-</div>
</div>answered yesterday
guradioguradio
13.9k32339
answered yesterday
guradioguradio
13.9k32339
answered yesterday
guradioguradio
13.9k32339
answered yesterday
guradioguradio
13.9k32339
13.9k32339
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55448748%2fjquery-js-wrap-near-div-with-same-classes-into-single-div%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
