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
Related
I am working with some sort of E-Shop Template and I can only manipulate some stuff with Jquery and JS.
Problem No 1:
I want to give the first box with the Content "Hello and Welcome!" and some background-Image. Problem is, that this box has some padding and I need to set the Background to the parent "inner-Wrapper" of this Div.
Is there a way to select the first "inner-wrapper" and check if the Content is "hello and welcome!" in the Content-box?
Problem No 2:
Box 1 - Box 4 Need another Background-Image.
I know some basic Jquery stuff but I struggle with those advanced stuff. And after 4 hours of trial and error I have to ask you guys.
I hope you can help me, and thanks in advance!
<div class="row">
<div class="inner-wrapper">
<div class="content-box">
Hello and Welcome!
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
<img src="" alt="">
</div>
</div>
</div>
<div class="row">
<div class="inner-wrapper">
<div class="content-box">
Box 1
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 2
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 3
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 4
</div>
</div>
</div>
Instead of checking the text you can add an extra class and check for that class Or you can give a seperate background image for the $('.content-box') inside the first .inner-wrapper
$(function(){
$('.content-box').each(function(){
if($(this).hasClass('firstBox')){
$(this).parent().css('background-image', 'url(http://via.placeholder.com/350x150)');
}else{
$(this).parent().css('background-image', 'url(http://via.placeholder.com/150x150)');
}
})
})
.inner-wrapper{
width:100px;
height:100px;
background-size: cover;
border:1px solid #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="inner-wrapper">
<div class="content-box firstBox">
Hello and Welcome!
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
<img src="" alt="">
</div>
</div>
</div>
<div class="row">
<div class="inner-wrapper">
<div class="content-box">
Box 1
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 2
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 3
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 4
</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>
Hi Apparently my toggle function does not work. I need to Hide a div "photography" when clicking the word "photography" that is located in another div. Please see my code below
HTML:
<div class="bar">
<div="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
Photography
Graphics
</div>
</div>
</div>
</div>
<section id="photograhpy" class="photograhpy">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<hr class="small">
<div class="row">
<div class="col-md-6">
<div class="photograhpy-item">
<a href="#">
<img class="img-photograhpy img-responsive" src="imgs/pics/car1.jpg">
</a>
</div>
</div>
JS:
$(document).ready(function(){
$("#hideshow").click(function(){
$("#photography").toggle(1000);
});
});
Looks like a spelling error:
<section id="photograhpy" class="photograhpy">
Should be:
<section id="photography" class="photography">
There is nothing else outstandingly wrong with your code.
Also, you may not reference elements with the same id exclusively via JavaScript. It is poor practice to give multiple elements the same id.
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);