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>
Related
I have a list of 12 posts wrapped in a div tag and the structure looks like this:
<div class="row">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
Is there a way I can loop every third div with the class of content in another div tag?
At the end I would have my structure like this:
<div class="row">
<div class="wrapper">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
<div class="wrapper">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
<div class="wrapper">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
<div class="wrapper">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
</div>
Is there a way I can loop every third div with the class of content in another div tag?
You can do something like this
// get all element at position 1,4,7,...etc and iterate
$('.row .content:nth-child(3n + 1)').each(function() {
$(this)
// get all siblings next to it
.nextAll('.content')
// get only next 2 elements from it
.slice(0, 2)
// combine the current element with it
.add(this)
// wrap all elemnts with the div(3 divs)
.wrapAll('<div class="wrapper">')
})
$('.row .content:nth-child(3n + 1)').each(function() {
$(this).nextAll('.content').slice(0, 2).add(this).wrapAll('<div class="wrapper">')
})
console.log($('.row')[0].outerHTML)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
Or you can use jQuery :lt() pseudo-class selector to avoid slice() method.
$('.row .content:nth-child(3n + 1)').each(function() {
$(this).nextAll('.content:lt(2)').add(this).wrapAll('<div class="wrapper">')
})
$('.row .content:nth-child(3n + 1)').each(function() {
$(this).nextAll('.content:lt(2)').add(this).wrapAll('<div class="wrapper">')
})
console.log($('.row')[0].outerHTML)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
Loop through the children, every third child create a new wrapper and add each child in the respective wrapper.
var test = document.querySelector("#test");
var index = 2;
for (var child of test.querySelectorAll(".content")) {
if (index++ >= 2) {
var newWrapper = test.appendChild(document.createElement("div"));
newWrapper.className = "wrapper";
index = 0;
}
test.removeChild(child);
newWrapper.appendChild(child);
}
console.log(test.innerHTML);
<div class="row" id="test">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
Try this
function WrapUpAllDivs(){
var CurrentDivs = $(".row",".content");
for(var i = 0; i < CurrentDivs.length -1 ; i+=3) {
CurrentDivs
.slice(i, i+3)
.wrapAll("<div class=\"wrapper\"></div>");
}
}
This question already has answers here:
jQuery find an element by its index
(7 answers)
Closed 4 years ago.
I was wondering how I could add a class to a specific object inside a list?
Let me demonstrate the question with some code.
$('.box')[5].addClass('center')
.center{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box">
c-1
</div>
<div class="box">
c-2
</div>
<div class="box">
c-3
</div>
<div class="box">
c-4
</div>
<div class="box">
c-5
</div>
<div class="box">
c-6
</div>
<div class="box">
c-7
</div>
<div class="box">
c-8
</div>
<div class="box">
c-9
</div>
</div>
This does not work because I get an error:
Uncaught TypeError: $(...)[5].addClass is not a function
I only want to add the class to the fifth element of the list. What can I do?
$('.box') is an object not an array. So you can not use index like that.
You can simply use eq() selector which selects the element at the specified index within the matched set:
$('.box:eq(5)').addClass('center');
.center{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box">
c-1
</div>
<div class="box">
c-2
</div>
<div class="box">
c-3
</div>
<div class="box">
c-4
</div>
<div class="box">
c-5
</div>
<div class="box">
c-6
</div>
<div class="box">
c-7
</div>
<div class="box">
c-8
</div>
<div class="box">
c-9
</div>
</div>
In JQuery there is something called the eq selector
Select the element at index n within the matched set.
Here is how to use it in your instance (remember counting starts at 0)
$('.box:eq( 5 )').addClass('center')
.center {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box">
c-1
</div>
<div class="box">
c-2
</div>
<div class="box">
c-3
</div>
<div class="box">
c-4
</div>
<div class="box">
c-5
</div>
<div class="box">
c-6
</div>
<div class="box">
c-7
</div>
<div class="box">
c-8
</div>
<div class="box">
c-9
</div>
</div>
I hope you find this helpful.
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>
In a web page, I have a grid of divs. In each div are 3 divs, the 2nd is hidden, I want it so that when the user hovers over the 3rd div, the 1st div becomes hidden and the 2nd is displayed.
I'm using jquery.
<div class="container">
<div class="hello">hello</div>
<div class="who">sailor
</div>
<div onmouseover="whoOn();" onmouseout="whoOff();" class="hover">hover me</div>
</div>
<div class="container">
<div class="hello">hello</div>
<div class="who">dolly
</div>
<div onmouseover="whoOn();" onmouseout="whoOff();" class="hover">hover me</div>
</div>
<div class="container">
<div class="hello">hello</div>
<div class="who">kitty
</div>
<div onmouseover="whoOn();" onmouseout="whoOff();" class="hover">hover me</div>
</div>
Here's a Codepen
Your whoOn and whoOff methods can be combined like this:
<div class="container">
<div class="hello">hello</div>
<div class="who">sailor
</div>
<div onmouseover="whoBoth(this);" onmouseout="whoBoth(this);" class="hover">hover me</div>
</div>
Javascript:
function whoBoth(target) {
$(target).siblings(".hello, .who").toggle();
}
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>