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.
Related
I have the below page layout:
<div class="content">
<div class="main-content profile0">
<div class="messages">
</div>
<div class="moreinfo">
</div<
</div>
<div class="main-content profile1">
<div class="messages">
</div>
<div class="moreinfo">
</div<
</div>
</div>
Currently I have been doing things like
$('.messages').remove();
but I need to be able to set which div is actually the parent, so I can tell jquery to only look at the childer of the div "main-content profile1"
So that then
$('.messages').remove();
refers to the child of "main-content profile1" and not "main-content profile0"
You can use the find() like
$('.main-content.profile1').find('.messages').remove();
As AmmarCSE said, you can use find(), but you could also just change the selector.
$('.main-content.profile1 .messages')
For the life of me I can't figure out how to access the first div with text "I want this one" starting with the id of div1
My attempt:
$("#div1").first().first().html();
Here is an example
<div id="div1">
<div class="row">
<div class="another">I want this one</div>
<div class="another">Not this one</div>
</div>
</div>
Try this
1.
$("#div1 .another:first").html();
2.
$("#div1 .another").first().html();
3.
$("#div1 .another").eq(0).html();
Example
If you literally want the first element within the first element, you can do it in one selector using pure javascript selectors for performance like so:
var row = $('#div1 > div:first-child > div:first-child');
alert(row.text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="div1">
<div class="row">
<div class="another">I want this one</div>
<div class="another">Not this one</div>
</div>
<div class="row">
<div class="another">Another one</div>
<div class="another">Yet another one</div>
</div>
</div>
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
I have something like this, and i need to show every div called "plink" just in the main div of each parent, so i tried to fadeIn ".plink" but its doing the same function for all the divs of "plink"
<script>
$(document).ready(function(){
$('.plink').hide();
$('.project').mouseover(function(){
$(this).next('.plink').fadeIn(400);
});
$('.project').mouseleave(function(){
$(this).next('.plink').fadeOut(200);
});
});
</script>
<div class="project">
<div class="plink">
<div class="go"></div>
<div class="goplus"><img src="images/more.png" border="0"/></div>
</div>
<div class="pic"><img src="images/portfolio_pic2.png" border="0" alt="projectname"/></div>
<div class="title">Test1</div>
</div>
<div class="spacer_project"></div>
<div class="project">
<div class="plink">
<div class="go"></div>
<div class="goplus"><img src="images/more.png" border="0"/></div>
</div>
<div class="pic"><img src="images/portfolio_pic.png" border="0" alt="projectname"/></div>
<div class="title">test2</div>
</div>
You can use find() instead of next()...
$(this).find('.plink').fadeIn(400);
because this is your .project div then you need to "find" the child elements that you are looking for. Using next() means you will get the very next element if it matches the selector (i.e. it is check to see if the next .project div matches the .plink selector)
I would go the FIND route like musefan suggested. Here is the solution code:
http://jsfiddle.net/bx7YC/
<div class="project">
<div class="plink">
<div class="go">go</div>
<div class="goplus">goplus</div>
</div>
<div class="pic">pic</div>
<div class="title">Test1</div>
</div>
<div class="spacer_project"></div>
<div class="project">
<div class="plink">
<div class="go">go</div>
<div class="goplus">goplus</div>
</div>
<div class="pic">pic</div>
<div class="title">Test2</div>
</div>
$('.plink').hide();
$('.project').mouseover(function(){
$(this).find('.plink').fadeIn(400);
});
$('.project').mouseleave(function(){
$(this).find('.plink').fadeOut(200);
});
I replaced the broken img links with simple text for the jsfiddle.
In my actual code:
<div id="mother">
<div id="child-01"></div>
<div id="child-02"></div>
<div id="child-03"></div>
</ul>
I need to produce:
<div id="mother">
<div id="myWrap">
<div id="child-01"></div>
<div id="child-02"></div>
</div>
<div id="child-03"></div>
</ul>
I was playing with wrap, .wrapAll() and children, but I'm stuck.
If in my actual code i have:
<div id="mother">
<div id="child-01"></div>
<div id="child-02"></div>
<div id="child-03"></div>
</ul>
<div id="uncle">
<div id="cousin-01"></div>
<div id="cousin-02"></div>
<div id="cousin-03"></div>
</ul>
How do i produce:
<div id="mother">
<div id="myWrap">
<div id="child-01"></div>
<div id="child-02"></div>
<div id="cousin-02"></div>
</div>
<div id="child-03"></div>
</ul>
First as Adam said remove the # prefix from your id attributes. Also match your closing tags, currently you have a </ul> where a </div> should be.
Then, you can do it using :lt() and .wrapAll() like this:
$("#mother div:lt(2)").wrapAll("<div id='myWrap'></div>");
This gets everything less than index 2 (0 and 1 are the first 2), then wraps it. You can test it here.
Remove # from your HTML ids.
$("#mother div:eq(0), #mother div:eq(1)").wrapAll("<div id='father'></div>")
sharp should not be part of the id's. Then you can do:
$('#child-01, #child-02').wrapAll('<div id="#mywrap" />');
$(document).ready(function(){
$(".new-grid__item:nth-child(1), .new-grid__item:nth-child(2)").wrapAll('<div class="child"></div>');
});