I have markup like this:
<div class="container">
<div class="item">
<div class="left">1</div>
<div class="right">2</div>
</div>
<div class="item">
<div class="left">1</div>
<div class="right">2</div>
</div>
<div class="item">
<div class="left">1</div>
<div class="right">2</div>
</div>
<div class="item">
<div class="left">1</div>
<div class="right">2</div>
</div>
<div class="item">
<div class="left">1</div>
<div class="right">2</div>
</div>
<div class="item">
<div class="left">1</div>
<div class="right">2</div>
</div>
</div>
I'm trying to get the children of container so all of the items, then I want to .slice(0,2) so I can get the first two item divs.
I've tried using $('.container').children(), but this only seems to return the first item. Any suggestions?
Thank you
IIRC, this is what you're after:
var $firstTwo = $('.container > .item:lt(2)');
http://jsfiddle.net/9jp5D/
you can do it like
var first2divs = $('.container .item').slice(0, 2);
Related
So it's hard to explain without giving an example, but I'll try my best.
So lets say my HTML looks like this:
<div class="container">
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece active-piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
</div>
So what I want is in Javascript/jQuery to get the .active-piece, then from there on count which .item it is inside of the .container element.(So 2 being the answer, considering we start counting from 0)
I know I can get the $('.active-piece'), and probably should get the parent of the parent from there but then what am I suppose to do?
Maybe I'm thinking too difficult, but I can't seem to figure out how to do get the expected result. Does anyone know how to?
Basically you want to get index of the item element that has child element at some level with the class active-piece. To do that you could use closest method to get parent with class item and then get index of that element
$('.active-piece').closest('.item').index();
const index = $('.active-piece').closest('.item').index();
console.log(index)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece active-piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
</div>
I know there are examples above, but they all use jQuery. So I've written a little bit about how to do this with vanilla javascript. It may not be the most optimal, but hopefully it helps if you don't wish to use jQuery. (I still recommend the jQuery methods if you already use it in your project)
So we start by finding the .active-piece element.
var active = document.querySelector(".active-piece");
Next, we'll back up until we're in the .item element. We know it is two elements above.
var item = active.parentElement.parentElement;
Now we'll loop through the parent of item until we find a match.
for (var i=0; i < item.parentElement.childElementCount; i++) {
var compare = item.parentElement.children.item(i);
if (compare == item) {
console.log(`index of item containing active-piece is ${i}`);
break;
}
}
Here's a snippet
var active = document.querySelector(".active-piece");
var item = active.parentElement.parentElement;
for (var i=0; i < item.parentElement.childElementCount; i++) {
var compare = item.parentElement.children.item(i);
if (compare == item) {
console.log(`index of item containing active-piece is ${i}`);
break;
}
}
<div class="container">
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece active-piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
</div>
you can make use of filter to get all the items having active-piece as child element,
you can store result in itemWithActivePiece variable and use it for further operations
$(function(){
var itemWithActivePiece = $('.container .item').filter(function(){
return $(this).find('.piece-container .active-piece').length > 0;
});
console.log(itemWithActivePiece.length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece active-piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
</div>
What is the best way to copy/clone a div inside a list of divs with jquery to the corresponding locations in another container.
I try to copy all "copy-this" elements to the same location in the other container. So first ".copy-this" should be duplicated in the first item of the second container, same for (2)->(2) etc...
HTML DOM:
<div class="content">
<div class="item">
<div class="copy-this">Some info</div>
<div class="random-div">Not to copy</div>
</div>
<div class="item">
<div class="copy-this">Some info 2</div>
</div>
<div class="item">
<div class="copy-this">Some info 3</div>
<div class="random-div">Not to copy</div>
</div>
<div class="item">
<div class="copy-this">Some info 4</div>
</div>
</div>
<div class="content">
<div class="item">
</div>
<div class="item">
<div class="random-div">Not to copy</div>
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
EDIT
OP has requested the behavior under the condition of viewport size (window width) being that the clones are present when at 600px or less.
How would you use this functions inside a responsive function, to copy it if the window loads/resizes under 600px, and remove it if it resizes to over 600px again? If i wrap it in this: $(window).on("load resize",function(e){ if ($(window).width() < 1200) { } }); It keeps firing for each resize.
While this should be another question entirely, I have added this solution in reply to OP's comment/question. The following PLUNKER uses one media query and the extra styles are for demonstration purposes only. The relevant addition is one media query with one ruleset:
#media (min-width:600px) {
.content + .content > .item > .copy-this {
display: none;
}
}
ORIGINAL ANSWER
First we collect all .copy-this with .each() method:
$('.copy-this').each(function(idx, obj) {
Next, we need to differentiate the 2 .content divs in order to designate which one we need to clone the content from and which one to append the clones to (without modifying layout assuming that a criterion), we can use the adjacent sibling selector +. With a solid hook into the target elements we will append to, we'll use .eq(idx) to sync the .items from the first .content, to the .items of the last .content.
var target = $('.content + .content > .item').eq(idx);
Finally, we .clone() and .prepend(). Note the results in that the clones are highlighted with yellow text on black background.
var clone = $(this).clone(true, true);
target.prepend(clone);
SNIPPET
$('.copy-this').each(function(idx, obj) {
var target = $('.content + .content > .item').eq(idx);
var clone = $(this).clone(true, true);
target.prepend(clone);
});
.content + .content > .item > .copy-this {
color: yellow;
background: black;
}
.random-div {
color: brown;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="content">
<div class="item">
<div class="copy-this">Some info 1[#1]</div>
<div class="random-div">Not to copy 1[#1]</div>
</div>
<div class="item">
<div class="copy-this">Some info 2[#1]</div>
</div>
<div class="item">
<div class="copy-this">Some info 3[#1]</div>
<div class="random-div">Not to copy 2[#1]</div>
</div>
<div class="item">
<div class="copy-this">Some info 4[#1]</div>
</div>
</div>
<div class="content">
<div class="item">
</div>
<div class="item">
<div class="random-div">This is original content[#2]</div>
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</body>
Try to loop through first div then insert outerHTML of copy-this into second container
var content1 = document.getElementsByClassName('content')[0],
content1Items = content1.getElementsByClassName('item'),
content2 = document.getElementsByClassName('content')[1],
content2Items = content2.getElementsByClassName('item'),
copiedHTML;
for (var i = 0, l = content1Items.length; i < l; i++) {
copiedHTML = content1Items[i].getElementsByClassName('copy-this')[0].outerHTML;
content2Items[i].insertAdjacentHTML('afterbegin', copiedHTML);
}
<div class="content">
<div class="item">
<div class="copy-this">Some info</div>
<div class="random-div">Not to copy</div>
</div>
<div class="item">
<div class="copy-this">Some info 2</div>
</div>
<div class="item">
<div class="copy-this">Some info 3</div>
<div class="random-div">Not to copy</div>
</div>
<div class="item">
<div class="copy-this">Some info 4</div>
</div>
</div>
<div class="content">
<div class="item">
</div>
<div class="item">
<div class="random-div">Not to copy</div>
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
Jquery method
var content1 = $('.content').eq(0),
content2 = $('.content').eq(1),
copiedHTML;
$.each(content1.find('.item'), function (i, item) {
copiedHTML = $(item).find('.copy-this').clone();
content2.find('.item').eq(i).prepend(copiedHTML);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="content">
<div class="item">
<div class="copy-this">Some info</div>
<div class="random-div">Not to copy</div>
</div>
<div class="item">
<div class="copy-this">Some info 2</div>
</div>
<div class="item">
<div class="copy-this">Some info 3</div>
<div class="random-div">Not to copy</div>
</div>
<div class="item">
<div class="copy-this">Some info 4</div>
</div>
</div>
<div class="content">
<div class="item">
</div>
<div class="item">
<div class="random-div">Not to copy</div>
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
I'm trying to hide the outer div when a nested div is empty (including white-space node). I've found a solution that works if there is NO whitespace:
Hide parent DIV if <li> is Empty
I need it to work when there IS white space present, ie:
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 1</div>
<div class="content">
<div class="product"> </div>
</div>
</div>
</div>
Example fiddle
Working fiddle
You could use the both :empty and :contain() selector :
$("div.product:contains(' '), div.product:empty").closest('div.wrapper').hide();
Hope this helps.
$("div.product:contains(' '), div.product:empty").closest('div.wrapper').hide()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 1</div>
<div class="content">
<div class="product"> </div>
</div>
</div>
</div>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Visible if working 2</div>
<div class="content">
<div class="product">text</div>
</div>
</div>
</div>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 3</div>
<div class="content">
<div class="product"></div>
</div>
</div>
</div>
You can iterate over each div.product and trim the text to remove whitespace. If there's anything left, show it, otherwise, hide its wrapper.
$("div.product").each(function() {
if ($(this).text().trim() == '') {
$(this).closest('div.wrapper').hide()
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 1</div>
<div class="content">
<div class="product"></div>
</div>
</div>
</div>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Visible if working 2</div>
<div class="content">
<div class="product">text</div>
</div>
</div>
</div>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 3</div>
<div class="content">
<div class="product"></div>
</div>
</div>
</div>
//Try this using Jquery
<script>
//A perfect reference in Jquery...
var element=$('#target_child');
if($(element).html()==''){
$(element).parent().hide()
}else{
//do some work
}
</script>
I am new to javascript. The button i wanna make should add every single time clicking it a new card to my web page. Unfortunatly my code does not work. Can you guys help me?
My Code:
html:
<div class="plus">+</div>
<button onclick="newPerson()" class="plus">
<div class="item">
<p>title</p>
</div>
</button>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
javaScript Code :
function newPerson() {
document.getElementByClassName("item")
};
Try it :
$(document).ready(function(){
$("button.plus").on("click",function(){
$("div:last").after("<div class=item><p>Title</p></div>");
})
})
This is Demo : UpdatedDemo
Do it like this
<div id = "main">
//your same html code
</div>
<script>
function newPerson() {
var newdiv = document.createElement('div');
newdiv.className+='item';
var newp = document.createElement('p');
newp.innerHTML = "TItle";
newdiv.appendChild(newp);
document.getElementById('main').appendChild(newdiv);
}
</script>
You need to create the element through JS and append it to the document
This is another way to solve it:
function newPerson() {
$('#wrapper').append('<div class="item"><p>Title</p></div>')
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="plus">+</div>
<button onclick="newPerson()" class="plus">
<div class="item">
<p>title</p>
</div>
</button>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
</div>
I have a 3 column div with multiple rows. What is the most dynamic way to extract content from the first div and append/prepend this to the 3rd div - Ensuring that all following divs follow along.
here is my example code:
<div class="content">
<div class="item">
<div class="col1">
<div class="img1">
<img src="img_in_first_col">
</div>
</div>
<div class="col2"></div>
<div class="col3">
<div class="img2">
<img src="img_in_third_col">
</div>
</div>
</div>
<div class="item">
<div class="col1">
<div class="img1">
<img src="img_in_first_col">
</div>
</div>
<div class="col2"></div>
<div class="col3">
<div class="img2">
<img src="img_in_third_col">
</div>
</div>
</div>
<div class="item">
<div class="col1">
<div class="img1">
<img src="img_in_first_col">
</div>
</div>
<div class="col2"></div>
<div class="col3">
<div class="img2">
<img src="img_in_third_col">
</div>
</div>
</div>
</div>
I've tried using something along the lines of:
$('.item .col1 .img1').each(function(){
$(this).prependTo('.item .col3 .img2')
})
but what i get is all the images being added to all the rows.
Please help! thanks in advance
Should be as simple as this:
$(".col1").each(function (index, element) {
$(this).closest(".col3").prepend($(this).contents());
});
You could use this to insert column 1 after column 3:
$('.col1').each(function(){
$(this).insertAfter($(this).siblings('.col3'));
});
... or before column 3:
$('.col1').each(function(){
$(this).insertBefore($(this).siblings('.col3'));
});
Used jQuery functions:
insertAfter
insertBefore
siblings