This question already has answers here:
jQuery move node out of its parent
(3 answers)
Closed 7 years ago.
I am trying to take a div (in this case "childDiv2") and its contents and move it before its parent.
So essentially take this
<div id="parentDiv">
<div class="childDiv1">
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
</div>
<div class="childDiv2">
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
</div>
</div>
and make it this
<div class="childDiv2">
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
</div>
<div id="parentDiv">
<div class="childDiv1">
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
</div>
</div>
I know I probably need to use .parent() and .before() to get it to work, but I'm stuck on how the jquery would look. Any ideas?
You would use the .insertBefore() method:
$('#parentDiv .childDiv2').insertBefore('#parentDiv');
Related
I'm creating a website and I'm having some trouble with javascript. I have this function:
function offerboxclick(obj) {
obj.classList.toggle("menuelementclicked");
}
and my html looks like this:
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 0</div>
<level>
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 1</div>
</div>
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 1</div>
</div>
</level>
</div>
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 0</div>
</div>
The css code I think isn't relevant, because the problem is probably with the js function. As you can see, I have a multi level menu, and it works just fine when I'm clicking on the level 0 element to show hidden level 1 elements. But when I click any of the level 1 elements, the js function does work properly on the object, because it toggles "menuelementclicked" class on it. The problem is that it also toggles this class in parent menu element, so at the same time it opens level 2 and closes whole menu. I don't really know what to do now. Any help would be appreciated!
P.S. I tried putting my code on jsfiddle to show you all of it but for some reason on it doesn't work there at all 0_o
I have created a table using div instead of using table structure.Now I want to add pagination feature for this table which is created using div's.
I wanted to know whether there is any plugin available which works with div.
Here is sample code
<div class="list">
<div class="item">
<div class="item-swipe">
<div class="col-xs-5 col-xs-offset-1 col-lg-6 col-md-6 col-lg-offset-0 col-md-offset-0">
<div class="wrap">
<span class="row1 date-content date whitespace">Col1</span>
</div>
</div>
<div class="col-xs-4 col-xs-offset-2 col-lg-5 col-md-5 col-lg-offset-0 col-md-offset-0">
<div class="wrap">
<span class="row1 date-content date">Col2</span>
</div>
</div>
<div class="col-xs-3 col-lg-1 col-md-1 col-lg-offset-0 col-md-offset-0 hidden-xs hidden-xs hidden-sm hidden-md">
<div class="wrap">
<a class="id">Col3</a>
</div>
</div>
</div>
</div>
</div>
I have this sample code repeated.I have created table using the above structure.How can I now add pagination to this,Or how can I convert this into table so as to use pagination.
You can explore JQuery Datatables. client-side or server-side pagination possible. Including infinite scroll.
You can use JSONPagination Plugin, which doesn't depend on the DOM, since its done in the JSON level so you can create any kind of table using div or table tag, only few steps needs to be remembered which is explained in the plugin itself.
Disclaimer: I am the author of this plugin.
I have some problem in getting the length of the div with particular class.
HTML
<div class="sampleDiv">
<div class="e"></div>
<div class="e"></div>
<div class="list-tasks12">
<div class="slot"></div>
</div>
<div class="list-tasks12">
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
</div>
</div>
JS
alert($(".sampleDiv").find('.list-tasks12:nth-child(1)').find('.slot').length)
Here it is showing length as zero which is wrong.
Please help what i am doing wrong
Demo Here
Try this
$(".sampleDiv").find('.list-tasks12').eq(0).find('.slot').length
The alert is not working properly because the <div class="e"></div> are also children of the parent div. You should remove them from the <div class="sampleDiv"> container or count them also - so if you want the first child <div class="list-tasks12"> you should count the two <div class="e"></div> containers and use the following script:
alert($(".sampleDiv").find('.list-tasks12:nth-child(3)').find('.slot').length);
For the second <div class="list-tasks12"> child you should use:
alert($(".sampleDiv").find('.list-tasks12:nth-child(4)').find('.slot').length);
Here is a jsfiddle for it: https://jsfiddle.net/b1hsp30j/
Inside row two individual div how can one right hand side dive fixed when scrolling page then fixed and when come footer area then up this fixed div.
This is my code example below:
I want col-md-4 class fixed when come footer content then up.
<div class="container">
<div class="row">
<div class="col-md-8">
</div>
<div class="col-md-4">
</div>
</div>
</div>
Demo- http://jsfiddle.net/3RkM3/41/
Layout-
<div class="row">
<div class="col-xs-8 content">Content</div>
<div class="col-xs-3 col-xs-offset-1">
<div class="fixed col-xs-4">
Something
</div>
</div>
</div>
I'm using a one page scrolling plugin (http://www.thepetedesign.com/demos/onepage_scroll_demo.html) to be more precise.
I've noticed that many one page scrolling tutorials & plugins use sections. I'm having some issues targeting the sections. What I'm trying to do is add simple navigation to the plugin so that users know what page they are on.
I thought the code would be rather simple just using
if ($(".page1").hasClass("active")) {
console.log("page one active");
}
But this doesn't seem to work. Is there something I'm missing regarding targeting sections with jQuery? All I need to figure out is how to correctly target the section then I can add classes to my navigation tab.
EDIT
<div class="main">
<section class="page1" id="pageone">
<div class="content col-xs-offset-2 col-xs-10 col-sm-offset-2 col-sm-10 col-lg-offset-2 col-lg-10">
<div class="content-inner">
<h1>FIRST<br>PAGE<br></h1>
</div>
</div>
</section>
<section class="page2">
<div class="content col-xs-offset-2 col-xs-10 col-sm-offset-2 col-sm-10 col-lg-offset-2 col-lg-10">
<div class="content-inner">
<h1>SECOND <br> PAGE <br> YO!</h1>
</div>
</div>
</section>
</div>