I have following HTML code:
<div class="block">
<div class="destination"></div>
<div class="source"><img src="/img-1.png" alt="test"></div>
</div>
<div class="block">
<div class="destination"></div>
<div class="source"><img src="/img-2.png" alt="test"></div>
</div>
<div class="block">
<div class="destination"></div>
<div class="source"><img src="/img-3.png" alt="test"></div>
</div>
I need to move each image from "source" to "destination" in each div-"block".
When I'm trying the code:
$j('.block .source img').each(function () {
$j(this).detach().appendTo('.block > .destination');
});
I'm getting all three images in each div.
Use .closest(SELECTOR) to find closest parent element of the ELEMENT
var $j = $;
$j('.block .source img').each(function() {
$j(this).appendTo($(this).closest('.block').find('.destination'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="block">
<div class="destination"></div>
<div class="source">
<img src="/img-1.png" alt="test">
</div>
</div>
<div class="block">
<div class="destination"></div>
<div class="source">
<img src="/img-2.png" alt="test">
</div>
</div>
<div class="block">
<div class="destination"></div>
<div class="source">
<img src="/img-3.png" alt="test">
</div>
</div>
Inspect the HTML, you will see that the images are now inside the .destination divs:
$('.block').find('.source').each(function() {
var that = $(this);
var img = that.children().clone();
that.empty();
that.closest('.block').find('.destination').append(img);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="block">
<div class="destination"></div>
<div class="source"><img src="/img-1.png" alt="test"></div>
</div>
<div class="block">
<div class="destination"></div>
<div class="source"><img src="/img-2.png" alt="test"></div>
</div>
<div class="block">
<div class="destination"></div>
<div class="source"><img src="/img-3.png" alt="test"></div>
</div>
Use this instead:
$j('.block .source img').each(function() {
$j(this).appendTo( $(this).parent().prev() );
});
You need to use this to refer to the image being looped over, and there's no need to use detach() with appendTo() as appendTo() will handle the moving.
jsFiddle example
$(".block").each(function(){
var html = $(this).find(".source").html();
$(this).find(".source").empty();
$(this).find(".destination").html(html);
});
https://fiddle.jshell.net/40x85u7b/
$('.block').each(function(){
var $this = $(this);
//find the image is source and append it to the destination. append will do the detach for you
$this.find('.source img').appendTo($this.find('.destination'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block">
<div class="destination"></div>
<div class="source"><img src="/img-1.png" alt="test"></div>
</div>
<div class="block">
<div class="destination"></div>
<div class="source"><img src="/img-2.png" alt="test"></div>
</div>
<div class="block">
<div class="destination"></div>
<div class="source"><img src="/img-3.png" alt="test"></div>
</div>
Related
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>
Is there anyway i can find the current class number?
For example: Total elements with class 'TEST' are 20. $('.TEST').length
If i click on 4th test element i should get 4.
I played with index but couldn't get it to work.
Please look the example below.
<div class="a">
<div class="b">
<div class="TEST">CLICK ON THIS.</div>
</div>
</div>
<div class="e">
<div class="f">
<div class="TEST">CLICK ON THIS.</div>
</div>
</div>
<div class="k">
<div class="t">
<div class="TEST">CLICK ON THIS.</div>
</div>
</div>
.....
Jquery
$(document).on('click','.TEST'){
.....
}
I think this is what you're looking for. Sounds like you were close.
$(function () {
$('.TEST').click(function () {
console.log($('.TEST').index(this));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<div class="b">
<div class="TEST">CLICK ON THIS.</div>
</div>
</div>
<div class="e">
<div class="f">
<div class="TEST">CLICK ON THIS.</div>
</div>
</div>
<div class="k">
<div class="t">
<div class="TEST">CLICK ON THIS.</div>
</div>
</div>
Note, click on fourth .TEST element should return 3, as .index() uses 0-based index
$(document).on('click', '.TEST', function(e) {
console.log($(this).index(".TEST"))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<div class="b">
<div class="TEST">CLICK ON THIS.</div>
</div>
</div>
<div class="e">
<div class="f">
<div class="TEST">CLICK ON THIS.</div>
</div>
</div>
<div class="k">
<div class="t">
<div class="TEST">CLICK ON THIS.</div>
</div>
</div>
I have a following html as follows:
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
<div class="outerdiv">
<div class="innerdiv>
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have to apply "border-width:10px" for all divs with class = innerdiv provided that "outerdiv" contains both "title" and "innerdiv"
.
My expected output is:
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
<div class="outerdiv">
<div class="innerdiv>
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying this:
$(element).find(".outerdiv").not("[class="title"]).css("border-width","10px").
Edit: The number of divs are dynamic and not fixed in number
You need to use :has selector along with immediate child selector to target innerdiv element:
$('.outerdiv:has(.innerdiv):has(.title) > ,.title > .innerdiv ').css("border-width","10px");
DEMO SNIPPET :
$(function(){
$('.outerdiv:has(.innerdiv):has(.title) > .title > .innerdiv ').css("border-width","100px").css('border' ,'1px solid grey')
}) ;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="outerdiv">
<div class="title">1
<div class="innerdiv">2
<div class="outerdiv">3
<div class="title">4
<div class="innerdiv">5
<div class="outerdiv">6
<div class="innerdiv">7
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can do this with good css hierarchy just apply the styles to
.outerdiv > .title > .innerdiv{
css goes here
}
and they will only affect divs in the hierarchy that you mentioned.
Simply use:
$('.innerdiv').css('border-width','10px');
It will add border-width to all divs with class 'innerdiv'.
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);