Create clone of first two divs - javascript

I want to create clone of first two div of parent Div.
HTML Code
<div id="parent">
<div class="child"> <div class="child1>Content1...</div> </div>
<div class="child">Content2...</div>
<div class="child">Content3...</div>
<div class="child">Content4...</div>
<div class="child">Content5...</div>
<div class="child">Content6...</div>
</div>
Expected output
clone_object = '<div class="child"> <div class="child1>Content1...</div> </div>
<div class="child">Content2...</div>'
I tried below code but it will clone only first div of parent div.
clone_object = $("#parent").find("div:first").clone();
My question is how to clone first two div of parent div?

You need to use :lt selector.
Select all elements at an index less than index within the matched set.
$("#parent .child:lt(2)").clone();
or
$("#parent>div:lt(2)").clone();
Working Demo

Related

Fetch and append element at last using jQuery

I have a div parent element with class .carousel-inner. Within this parent div, there are some children elements. I want to take its 2nd (child) element and append that element at last. I am getting and appending second element like this.
var a = $(".carousel-inner").children()[1];
$(".carousel-inner").append(a);
Now as I append this element, it removes this element from second position and append at the last. I want to keep this element a the second position as well. How can I do it?
using clone() after you find the element. and make another variable
var a = $(".carousel-inner").children()[1],
b = $(a).clone();
$(".carousel-inner").append(b);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner">
<div class="child">
a
</div>
<div class="child">
this clones
</div>
<div class="child">
c
</div>
</div>
OR clone the element just before appending like so :
var a = $(".carousel-inner").children()[1]
$(a).clone().appendTo('.carousel-inner');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner">
<div class="child">
a
</div>
<div class="child">
this clones
</div>
<div class="child">
c
</div>
</div>
Use .clone()
$(a).clone().appendTo('.carousel-inner');
Use clone();
var a = $(".test").children()[1];
a = $(a).clone();
$(".carousel-inner").append(a);
Clone is the good way to achieve what you want :
var a = $(".carousel-inner").children().eq(1);
a.clone().appendTo('.carousel-inner');
you are receiving an error because $(".carousel-inner").children()[1] get the DOM object and $(".carousel-inner").children().eq(1) get the Jquery object
and clone is defined only on jquery object.
use clone function like beolw
$("p").clone().appendTo("body");
You Can Do this way also.
var a = $(".carousel-inner").children().eq(1).prop('outerHTML');
$(".carousel-inner").append(a);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner">
<div class"first-child">First</div>
<div class"second-child">Second</div>
<div class"third-child">Third</div>
<div class"fourth-child">Fourth</div>
</div>

add a class to specific element by javascript and not repeat

this is sample code explain what i want:
<div id="someId">
<div class="someClass"></div>
<div class="targetClass"></div>
</div>
<div id="someId">
<div class="someClass"></div>
<div class="targetClass"></div>
</div>
<div id="someId">
<div class="someClass"></div>
</div>
this code for jquery:
var $newDiv = $("<div/>")
.addClass("targetClass")
$(".someClass").append($newDiv);
result is add a TargetClass in div number 3 and repeat same class in first and second div.
question is how i add class in the last div and not repeat it in another div.
Judging by your code, you want new div as a sibling of your .someClass div rather than its child.
Simply replace this line
$(".someClass").append($newDiv);
by
$( "div[id]:not(:has(.targetClass))" ).append($newDiv); //will append new div to all those divs which doesn't have child element with targetclass
var $newDiv = $("<div/>").addClass("targetClass");
$( "div[id]:not(:has(.targetClass))" ).append($newDiv);
Demo
Using .last() will select the last element you are searching for.
jQuery(".someClass").last().append($newDiv);
If you mean to add div with targetClass to a div with someId if it donot exists, you can use the find() function:
if($('#someId').find('.someClass').length == 0) {
var $newDiv = $("<div/>")
.addClass("targetClass")
$("#someId").append($newDiv);
}
I suppose you have unique IDs for parent divs as someId is not valid if it is the actual ID applied on multiple elements, this makes the markup invalid.
Use .last().parent() to put the element as a sibling element as they share same parent:
var $newDiv = $("<div/>")
.addClass("targetClass").html('dynamic target element.')
$(".someClass").last().parent().append($newDiv);
div{border:solid 1px red; margin:10px 0 0 0;}
div div{border:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someId-1">
<div class="someClass">some</div>
<div class="targetClass">target</div>
</div>
<div id="someId-2">
<div class="someClass">some</div>
<div class="targetClass">target</div>
</div>
<div id="someId-3">
<div class="someClass">here after this elem should add</div>
</div>

Append Child Elements to a Child Element in the same parent

How do you append child elements to a sibling using jQuery?
html
<div class="parent">
<div class="child one">...</div>
<div class="child">...</div>
<div class="child">...</div>
</div>
<div class="parent">
<div class="child one">...</div>
<div class="child">...</div>
<div class="child">...</div>
</div>
Script
$('.child').each(function(i, obj){
if(!$(obj).hasClass('one')){
$(obj).appendTo( .. Stuck here .. '.one');
}
});
I can get the parent object but the trouble is then selecting the child with class 'one'.
Essentially I want to move all siblings so that the become children of the first child.
<div class="parent">
<div class="child one">
<div class="child">...</div>
<div class="child">...</div>
</div>
</div>
<div class="parent">
<div class="child one">
<div class="child">...</div>
<div class="child">...</div>
</div>
</div>
You want to append all the child not one into child one?
$('.child').not('.one').appendTo('.one');
THE WORKING DEMO.
Get each element with class one, then append its siblings with class child.
$('.child.one').each(function(i, obj){
$(obj).siblings('.child').each(function(j, child){
$(child).appendTo(obj);
});
});
Working Demo
Note: if you want the child elements outside the one element, replace appendTo with after.
try this:
$('.child').each(function(){
if(!$(this).hasClass('one')){
$(this).appendTo('.one');
}});
Working Demo

Is there a way to wrapAll() but ignore one element?

If you have the following code:
<div class="parent">
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
<div class="4"></div>
<div class="5"></div>
</div>
How can I wrap a new div around div with class 2,3,4,5 so it looks like this:
<div class="parent">
<div class="1"></div>
<div class="sub">
<div class="2"></div>
<div class="3"></div>
<div class="4"></div>
<div class="5"></div>
</div>
</div>
wrapAll on the parent would wrap everything with a new div, is there a way to make it ignore the first div?
Use gt(0) to select all but the first one div(direct descendant) and wrapAll. This will select all divs with index greater than 0 present under .parent div.
$('.parent > div:gt(0)').wrapAll('<div class="sub">');
Fiddle
See :gt()
Output:
<div class="parent">
<div class="1">1</div>
<div class="sub">
<div class="2">2</div>
<div class="3">3</div>
<div class="4">4</div>
<div class="5">5</div>
</div>
</div>
Use the not() filter or the :not() selector.
$('.parent div').not('.1').wrapAll('<div class="sub">');
Or alternatively:
$('.parent div:not(.1)').wrapAll('<div class="sub">');
You can also use div:first-child in place of .1 if you always want to ignore the first element.
If the element you want to keep out is not necessarily the first, you could use:
$(".parent div").not("div.1").wrapAll("<div class='sub'>");
Although, this will re-order your divs so that the wrap comes first, and the unwrapped element comes last. Not a problem when it's the first element, but if it's the third, for example, the output would be:
<div class='sub'>
<div class="1"></div>
<div class="2"></div>
<div class="4"></div>
<div class="5"></div>
</div>
<div class="3"></div>
Example:
http://jsfiddle.net/tomtheman5/3TL4M/
edit: Just saw #Corion's answer... This is essentially the same, but with some more information. I'll leave it up.

Adding div before selected div

I have a bunch of divs one after the other.
<div class="betweenable">some content</div>
<div class="betweenable">other content</div>
<div class="betweenable">yet another</div>
When I click the last div, I want to insert the text new content in a div before it, so the final result will be
<div class="betweenable">some content</div>
<div class="betweenable">other content</div>
<div class="betweenable">new content</div>
<div class="betweenable">yet another</div>
I tried append but it's adding the new markup inside the select div at the top. I want it inserted outside the selected div and right before it. What should I use instead of this line
var newmarkup = '<div class="betweenable">new content</div>';
$(this).prepend();
You can try this
$('.betweenable').click(function(){
var newmarkup = '<div class="betweenable">new content</div>';
$(this).before(newmarkup);
});
Here's an example : http://jsfiddle.net/jomanlk/C4XyH/
you can use .before here is DEMO

Categories