Wrap divs after div - javascript

I would like to wrap the following divs after the button div with javascript/jquery to hide the rows by clicking of the button. I have multiple buttons and multiple rows after the trigger.
<div class="button"> </div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="button"> </div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
...
I would like to achieve
<div class="button"> </div>
<div class="wrapper">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
<div class="button"> </div>
<div class="wrapper">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
Thanks!! I just need to know how to wrapAll it the button thing is easy. (hopefully)


I have the solution:
$('.button').each(function() {
$(this).nextUntil('button').wrapAll('<div class="wrapper"></div>');
});

Related

jQuery show/hide methods arent working

Here is my codepen for you guys to play with.... CodePen.io
I cannot seem to get the #play-again button to show up once a game has finished using $('#play-again').show().
Any thoughts on this???
Update Added raw html link

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="banner">
<p>tic-tac-toe</p>
<button id="play-again"> <i class="fa fa-repeat"></i></button>
</div>
<div class="board">
<div class="row" id="row-1">
<div class="col" id="col-1-1">
<div class="content"></div>
</div>
<div class="col" id="col-1-2">
<div class="content"></div>
</div>
<div class="col" id="col-1-3">
<div class="content"></div>
</div>
</div>
<div class="row" id="row-2">
<div class="col" id="col-2-1">
<div class="content"></div>
</div>
<div class="col" id="col-2-2">
<div class="content"></div>
</div>
<div class="col" id="col-2-3">
<div class="content"></div>
</div>
</div>
<div class="row" id="row-3">
<div class="col" id="col-3-1">
<div class="content"></div>
</div>
<div class="col" id="col-3-2">
<div class="content"></div>
</div>
<div class="col" id="col-3-3">
<div class="content"></div>
</div>
</div>
</div>
</div>
The issue is that you must place the button#play-again outside the p when i changed, it is working for me

Remove parent element [duplicate]

This question already has answers here:
JQuery Remove Parent Elements
(3 answers)
Closed 6 years ago.
can someone help me solve this problem.
I want loop through class 'row' and delete entire class 'card-col' that contain id=x2 or x3.
<div class="row">
<div class="card-col">
<div class="card">
<div class="card" id="x1"></div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x2"></div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x3"></div>
</div>
</div>
</div>
expected result something like this.
what jquery i can use ?
<div class="row">
<div class="card-col">
<div class="card">
<div class="card" id="x1"></div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x4"></div></div>
</div>
</div>
thanks

Go quickly trough the jQuery docs:
Selectors how to get an element using the right selectors
.closest() test up the DOM tree finding the closest matching element
.remove() yep.
jQuery(function($) { // DOM is now ready
$("#x2, #x3").closest(".card-col").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="card-col">
<div class="card">
<div class="card" id="x1">x1</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x2">x2</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x3">x3</div>
</div>
</div>
</div>
The other way around, you can target first all .card-col and that use :not(:has(#x1)) to filter and than remove
https://api.jquery.com/not-selector/
https://api.jquery.com/has-selector/
jQuery(function($) { // DOM is now ready
$(".card-col:not(:has(#x1))").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="row">
<div class="card-col">
<div class="card">
<div class="card" id="x1">x1</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x2">x2</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x3">x3</div>
</div>
</div>
</div>

You could use parents() :
$("#x2, #x3").parents(".card-col").remove();
Hope this helps.
$("#x2, #x3").parents(".card-col").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="card-col">
<div class="card">
<div class="card" id="x1">x1</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x2">x2</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x3">x3</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x4">x4</div>
</div>
</div>
</div>

jQuery not working in jade. Documnet.ready function not working

Tried different intendations but the jQuery part is still not working.
PS : The jQuery lib is already included this document is extended.
extends home
mixin print(x,y)
if x < y
.column=x
else
.column
mixin rooms(n,num,a,b,c,d)
while n < num
.row(value=n++)
+print(n,a)
+print(n,b)
+print(n,c)
+print(n,d)
block content
div(id="tabs")
.row
.column
a(href="#tab1" onclick="open(this.href)") Ground Floor
.column
a(href="#tab2" onclick="open(this.href)") Ist Floor
.column
a(href="#tab3" onclick="open(this.href)") IInd Floor
div(id="tab1")
+rooms(100,111,111,104,111,111)
div(id="tab2")
+rooms(200,217,217,211,214,211)
div(id="tab3")
+rooms(300,317,317,311,314,311)
script(src='https://code.jquery.com/jquery-2.1.1.min.js')
script.
$(document).ready(function(){
$('#tab1').hide();
$('#tab2').hide();
$('#tab3').hide();
});
1.jQuery isn't hiding the div it is asked to hide
2.NO error in console.

The html generated is as expected
I copied the Jade into this online converter.
The end of the output looked like this:
<script>
$(document).ready(function(){
$('#tab1').hide();
$('#tab2').hide();
$('#tab3').hide();
</script>});
You missed out the indent before }); so it was placed outside the script element.
no errors in console
This generated the error:
Uncaught SyntaxError: Unexpected end of input
When I corrected that error, it successfully hid the elements:
<div id="tabs"></div>
<div class="row">
<div class="column">Ground Floor</div>
<div class="column">Ist Floor</div>
<div class="column">IInd Floor</div>
</div>
<div id="tab1">
<div value="100" class="row"></div>
<div class="column">101</div>
<div class="column">101</div>
<div class="column">101</div>
<div class="column">101</div>
<div value="101" class="row"></div>
<div class="column">102</div>
<div class="column">102</div>
<div class="column">102</div>
<div class="column">102</div>
<div value="102" class="row"></div>
<div class="column">103</div>
<div class="column">103</div>
<div class="column">103</div>
<div class="column">103</div>
<div value="103" class="row"></div>
<div class="column">104</div>
<div class="column"></div>
<div class="column">104</div>
<div class="column">104</div>
<div value="104" class="row"></div>
<div class="column">105</div>
<div class="column"></div>
<div class="column">105</div>
<div class="column">105</div>
<div value="105" class="row"></div>
<div class="column">106</div>
<div class="column"></div>
<div class="column">106</div>
<div class="column">106</div>
<div value="106" class="row"></div>
<div class="column">107</div>
<div class="column"></div>
<div class="column">107</div>
<div class="column">107</div>
<div value="107" class="row"></div>
<div class="column">108</div>
<div class="column"></div>
<div class="column">108</div>
<div class="column">108</div>
<div value="108" class="row"></div>
<div class="column">109</div>
<div class="column"></div>
<div class="column">109</div>
<div class="column">109</div>
<div value="109" class="row"></div>
<div class="column">110</div>
<div class="column"></div>
<div class="column">110</div>
<div class="column">110</div>
<div value="110" class="row"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<div id="tab2">
<div value="200" class="row"></div>
<div class="column">201</div>
<div class="column">201</div>
<div class="column">201</div>
<div class="column">201</div>
<div value="201" class="row"></div>
<div class="column">202</div>
<div class="column">202</div>
<div class="column">202</div>
<div class="column">202</div>
<div value="202" class="row"></div>
<div class="column">203</div>
<div class="column">203</div>
<div class="column">203</div>
<div class="column">203</div>
<div value="203" class="row"></div>
<div class="column">204</div>
<div class="column">204</div>
<div class="column">204</div>
<div class="column">204</div>
<div value="204" class="row"></div>
<div class="column">205</div>
<div class="column">205</div>
<div class="column">205</div>
<div class="column">205</div>
<div value="205" class="row"></div>
<div class="column">206</div>
<div class="column">206</div>
<div class="column">206</div>
<div class="column">206</div>
<div value="206" class="row"></div>
<div class="column">207</div>
<div class="column">207</div>
<div class="column">207</div>
<div class="column">207</div>
<div value="207" class="row"></div>
<div class="column">208</div>
<div class="column">208</div>
<div class="column">208</div>
<div class="column">208</div>
<div value="208" class="row"></div>
<div class="column">209</div>
<div class="column">209</div>
<div class="column">209</div>
<div class="column">209</div>
<div value="209" class="row"></div>
<div class="column">210</div>
<div class="column">210</div>
<div class="column">210</div>
<div class="column">210</div>
<div value="210" class="row"></div>
<div class="column">211</div>
<div class="column"></div>
<div class="column">211</div>
<div class="column"></div>
<div value="211" class="row"></div>
<div class="column">212</div>
<div class="column"></div>
<div class="column">212</div>
<div class="column"></div>
<div value="212" class="row"></div>
<div class="column">213</div>
<div class="column"></div>
<div class="column">213</div>
<div class="column"></div>
<div value="213" class="row"></div>
<div class="column">214</div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div value="214" class="row"></div>
<div class="column">215</div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div value="215" class="row"></div>
<div class="column">216</div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div value="216" class="row"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<div id="tab3">
<div value="300" class="row"></div>
<div class="column">301</div>
<div class="column">301</div>
<div class="column">301</div>
<div class="column">301</div>
<div value="301" class="row"></div>
<div class="column">302</div>
<div class="column">302</div>
<div class="column">302</div>
<div class="column">302</div>
<div value="302" class="row"></div>
<div class="column">303</div>
<div class="column">303</div>
<div class="column">303</div>
<div class="column">303</div>
<div value="303" class="row"></div>
<div class="column">304</div>
<div class="column">304</div>
<div class="column">304</div>
<div class="column">304</div>
<div value="304" class="row"></div>
<div class="column">305</div>
<div class="column">305</div>
<div class="column">305</div>
<div class="column">305</div>
<div value="305" class="row"></div>
<div class="column">306</div>
<div class="column">306</div>
<div class="column">306</div>
<div class="column">306</div>
<div value="306" class="row"></div>
<div class="column">307</div>
<div class="column">307</div>
<div class="column">307</div>
<div class="column">307</div>
<div value="307" class="row"></div>
<div class="column">308</div>
<div class="column">308</div>
<div class="column">308</div>
<div class="column">308</div>
<div value="308" class="row"></div>
<div class="column">309</div>
<div class="column">309</div>
<div class="column">309</div>
<div class="column">309</div>
<div value="309" class="row"></div>
<div class="column">310</div>
<div class="column">310</div>
<div class="column">310</div>
<div class="column">310</div>
<div value="310" class="row"></div>
<div class="column">311</div>
<div class="column"></div>
<div class="column">311</div>
<div class="column"></div>
<div value="311" class="row"></div>
<div class="column">312</div>
<div class="column"></div>
<div class="column">312</div>
<div class="column"></div>
<div value="312" class="row"></div>
<div class="column">313</div>
<div class="column"></div>
<div class="column">313</div>
<div class="column"></div>
<div value="313" class="row"></div>
<div class="column">314</div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div value="314" class="row"></div>
<div class="column">315</div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div value="315" class="row"></div>
<div class="column">316</div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div value="316" class="row"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(){
$('#tab1').hide();
$('#tab2').hide();
$('#tab3').hide();
});
</script>

Okay finally when you have a file which is extended you keep your js code in the parent file because keeping at the end of the extended document causes it to be inherited by some tag.

try writing # with ids
div(id="tabs")
.row
.column
a(href="#tab1" onclick="open(this.href)") Ground Floor
.column
a(href="#tab2" onclick="open(this.href)") Ist Floor
.column
a(href="#tab3" onclick="open(this.href)") IInd Floor
#tab1 rooms(100,111,111,104,111,111)
#tab2 rooms(200,217,217,211,214,211)
#tab3 rooms(300,317,317,311,314,311)

How to wrap all next elements until?

I have following html:
<div class="menuItem">Domů</div>
<div class="menuItem">O nás</div>
<div class="menuItem">Výzkum a vývoj</div>
<div class="submenuItem"><b>Aplikace aktivního gumového prášku</b>
</div>
<div class="submenuItem"><b>Odprašky</b>
</div>
<div class="submenuItem"><b>Guma</b>
</div>
<div class="submenuItem"><b>Zemědělství</b>
</div>
<div class="submenuItem"><b>Potravinářství</b>
</div>
<div class="menuItem">Projekční činnost</div>
<div class="menuItem">Realizace</div>
<div class="submenuItem"><b>realizace podstránka</b>
</div>
<div class="menuItem">Kontakty</div>
What I am trying to achieve, is wrap each .menuItem and all next .submenuItem with .menuSet. Unhappily, the following js wraps the whole snippet instead of the set defined above.
<div class="menuItem">Domů</div>
<div class="menuItem">O nás</div>
<div class="menuItem">Výzkum a vývoj</div>
<div class="submenuItem"><b>Aplikace aktivního gumového prášku</b>
</div>
<div class="submenuItem"><b>Odprašky</b>
</div>
<div class="submenuItem"><b>Guma</b>
</div>
<div class="submenuItem"><b>Zemědělství</b>
</div>
<div class="submenuItem"><b>Potravinářství</b>
</div>
<div class="menuItem">Projekční činnost</div>
<div class="menuItem">Realizace</div>
<div class="submenuItem"><b>realizace podstránka</b>
</div>
<div class="menuItem">Kontakty</div>
For make my intention more understandable, below I post the desired result:
$(".menuItem").nextUntil(".menuItem").andSelf().wrapAll("<div class='menuSet'></div>");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuSet">
<div class="menuItem">Domů</div>
</div>
<div class="menuSet">
<div class="menuItem">O nás</div>
</div>
<div class="menuSet">
<div class="menuItem">Výzkum a vývoj</div>
<div class="submenuItem"><b>Aplikace aktivního gumového prášku</b>
</div>
<div class="submenuItem"><b>Odprašky</b>
</div>
<div class="submenuItem"><b>Guma</b>
</div>
<div class="submenuItem"><b>Zemědělství</b>
</div>
<div class="submenuItem"><b>Potravinářství</b>
</div>
</div>
<div class="menuSet">
<div class="menuItem">Projekční činnost</div>
</div>
<div class="menuSet">
<div class="menuItem">Realizace</div>
<div class="submenuItem"><b>realizace podstránka</b>
</div>
</div>
<div class="menuSet">
<div class="menuItem">Kontakty</div>
</div>

As you are selecting all the menuItem's with class and than filtering from there, wrapAll will wrap your whole collection.
To solve this, one way would to be use $.each() and iterate through the menuItems and than wrap them.
$(".menuItem").each(function (index) {
$(this).nextUntil(".menuItem").andSelf().wrapAll("<div class='menuSet'></div>");
});
JSFiddle Demo.

Sorting nested elements based on various columns

I'm not sure if this is possible. I can't seem to even get started but I have the following HTML. Is it possible to click on a title (Column 1, Column 2 or Column 3) and have everything in the bodyModule get sorted?
<div class="moduleRowTitle">
<div class="column1">Column 1</div>
<div class="column2">Column 2</div>
<div class="column3">Column 3</div>
</div>
<div class="bodyModule">
<div class="row">
<div class="column1">AAAAA</div>
<div class="column2">BBBBB</div>
<div class="column3">CCCCC</div>
</div>
<div class="row">
<div class="column1">BBBBB</div>
<div class="column2">AAAAA</div>
<div class="column3">CCCCC</div>
</div>
<div class="row">
<div class="column1">BBBBB</div>
<div class="column2">CCCCC</div>
<div class="column3">AAAAA</div>
</div>
</div>
Clicking on column2 should sort as the following:
<div class="row">
<div class="column1">BBBBB</div>
<div class="column2">AAAAA</div>
<div class="column3">CCCCC</div>
</div>
<div class="row">
<div class="column1">AAAAA</div>
<div class="column2">BBBBB</div>
<div class="column3">CCCCC</div>
</div>
<div class="row">
<div class="column1">BBBBB</div>
<div class="column2">CCCCC</div>
<div class="column3">AAAAA</div>
</div>

Demo FIDDLE
Jquery
$(document).ready(function(){
$('.moduleRowTitle div').click(function(){
var vals = [];
var className=$(this).attr('class');
$( ".bodyModule ."+className).each(function(){
vals.push($(this).html());
});
vals.sort();
var i=0;
$( ".bodyModule ."+className).each(function(){
$(this).html(vals[i]);
i=i+1;
});
});
});
I hope this is what you expect

Categories

Resources