I have a container div names wrapper and it has several child divs named thumb
I want to apply css pseudo elements with the even and odd.
My codes are
<div class="wrapper">
<div class="col-half">
<div class="thumb">
...
</div>
</div>
<div class="col-half">
<div class="thumb">
...
</div>
</div>
<div class="col-half">
<div class="thumb">
...
</div>
</div>
<div class="col-half">
<div class="thumb">
...
</div>
</div>
</div>
And my css:
.wrapper:nth-child(even) .thumb:after{
//some codes
}
.wrapper:nth-child(odd) .thumb:after{
//some codes
}
But i am getting only odd styles.
Since the odd and even relationship is applied based on sibling index, you need to apply it on col-half as that is the repeated element.
Since your thumb element is the first child of its parent, it will only satisfy the odd selector
.wrapper .col-half:nth-child(even) .thumb:after {
content: 'x'
}
.wrapper .col-half:nth-child(odd) .thumb:after {
content: 'y'
}
<div class="wrapper">
<div class="col-half">
<div class="thumb">
...
</div>
</div>
<div class="col-half">
<div class="thumb">
...
</div>
</div>
<div class="col-half">
<div class="thumb">
...
</div>
</div>
<div class="col-half">
<div class="thumb">
...
</div>
</div>
</div>
You have a misunderstanding about :nth-child as it does not work as "nth child of this container" but as "am I the nth child of my parent?".
So you need to apply :nth-child(odd/even) to .col-half:
.col-half:nth-child(even) .thumb:after{
//some codes
}
.col-half:nth-child(odd) .thumb:after{
//some codes
}
The name for this selector has really caused many misunderstandings as it is too easy to misunderstand the way you did.
.col-half:nth-child(even) {
color: green;
}
.col-half:nth-child(odd) {
color: red;
}
Try like this: Demo
In your css, You are using the parent div for showing even and odd. Instead you need to use odd / even for child elements which repeats
.col-half:nth-child(even) .thumb{
background:#ccc;
}
.col-half:nth-child(odd) .thumb{
background:#f00;
}
Try This One
.wrapper .col-half:nth-child(2n) .thumb:after {
content: '';
}
.wrapper .col-half:nth-child(2n-1) .thumb:after {
content: '';
}
Related
I have been trying badly to wrap some divs with an outer div so that I can style them. But I'm unable to do so thus far.
I have this list div which contains some inner divs that I need to wrap. That is the inner divs which have same letters need to be bundled together. Although targeting the divs with the letters is not a good idea as they are gonna be dynamic.
This is an example of what I have been trying to achieve:
<div class="list-wrapper">
<div class="el">A</div>
<div>
<a>A</a>
</div>
</div>
<div class="list-wrapper">
<div class="el">C</div>
<div>
<a>C</a>
</div>
<div>
<a>C</a>
</div>
</div>
Another example:
This is what I have tried so far:
$(list).find('div.el').each(function(idx, item) {
$(item).nextAll('div').wrapAll('<div class="list-wrapper"></div>')
});
.wrapper {
background-color: red;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">
<div class="el">A</div>
<div>
<a>A</a>
</div>
<div class="el">B</div>
<div>
<a>B</a>
</div>
<div class="el">C</div>
<div>
<a>C</a>
</div>
<div>
<a>C</a>
</div>
<div class="el">D</div>
<div>
<a>D</a>
</div>
<div>
<a>D</a>
</div>
<div>
<a>D</a>
</div>
<div class="el">E</div>
<div>
<a>E</a>
</div>
</div>
To achieve your goal you can use a combination of nextUntil() within the loop, to get the div elements between each .el, and wrapAll(). You can include addBack() in there to add the current .el in the loop in to the collection to be wrapped. Try this:
$('#list').find('.el').each((i, el) => {
$(el).nextUntil('.el').addBack().wrapAll('<div class="list-wrapper"></div>')
});
.wrapper {
background-color: red;
padding: 20px;
}
.list-wrapper { border: 1px solid #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">
<div class="el">A</div>
<div><a>A</a></div>
<div class="el">B</div>
<div><a>B</a></div>
<div class="el">C</div>
<div><a>C</a></div>
<div><a>C</a></div>
<div class="el">D</div>
<div><a>D</a></div>
<div><a>D</a></div>
<div><a>D</a></div>
<div class="el">E</div>
<div><a>E</a></div>
</div>
Note that $(list) was only working by proxy, as elements with an id attribute are available as properties on the document. It's much better practice to use a valid string selector.
I have a problem, I need to hide all divs inside parent div except the first one.
Problem is, divs have no ID or anything.
Is there a possible way how to do it? Preferably by CSS or pure JS?
<div role="list" class="slds-form">
<div class="slds-grid">Visible</div>
<div class="slds-grid">Hide</div>
<div class="slds-grid">Hide</div>
</div>
Thank you for any advice :)
Use nth-child:
.slds-form > div:nth-child(n + 2) {
display: none;
}
<div role="list" class="slds-form">
<div class="slds-grid">Visible</div>
<div class="slds-grid">Hide</div>
<div class="slds-grid">Hide</div>
</div>
This will work for you:
you can combine child selection(:first-child) with :not to attain
the result you want.
.slds-form > div:not(:first-child) {
display: none;
}
<div role="list" class="slds-form">
<div class="slds-grid">Visible</div>
<div class="slds-grid">Hide</div>
<div class="slds-grid">Hide</div>
</div>
Hope this was helpfull for you.
You can use :not(:first-child):
.slds-form>div:not(:first-child) {
display: none;
}
<div role="list" class="slds-form">
<div class="slds-grid">Visible</div>
<div class="slds-grid">Hide</div>
<div class="slds-grid">Hide</div>
</div>
Can add an extra class to toggle show hide.
.slds-hide {
display: none;
}
.slds-show {
display: block;
}
<div role="list" class="slds-form">
<div class="slds-grid slds-show">Visible</div>
<div class="slds-grid slds-hide">Hide</div>
<div class="slds-grid slds-hide">Hide</div>
</div>
I thought this would be kinda straightforward but i cant wrap my head around this. I got to following html:
<div id="foo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div id="bar">
<div class="test">test1</div>
<div class="test">test2</div>
<div class="test">test3</div>
<div class="test">test4</div>
</div>
I need to grab/detach the div's .test and put/append them into the .item div's. So the first div .test needs to go in the first div .item, the second div .test to the second div .item etc. So it becomes:
<div id="foo">
<div class="item">1<div class="test">test1</div></div>
<div class="item">2<div class="test">test2</div></div>
<div class="item">3<div class="test">test3</div></div>
<div class="item">4<div class="test">test4</div></div>
</div>
Now i found some jquery code and i came to this:
var child = $('#bar').find("div").eq(0);
var parent = $('#foo').eq(0);
child.detach();
parent.append( child );
This works but as suspected, it detaches/appends the first div. Now i need to detach/append them all one by one and from reading a lot of topics, i think i need to put a loop/each in there somewhere but i have no idea how and im not getting any closer after screwing around for hours.
Anyone who can put me in the right direction with this?
You can move all of them easily by just using the append() method and selecting all the divs:
$('#bar').append( $('#foo div') )
/* This is just for showing that the elements actually moved. */
#foo { background:red; }
#bar { background:blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="foo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div id="bar">
<div class="test">test1</div>
<div class="test">test2</div>
<div class="test">test3</div>
<div class="test">test4</div>
</div>
<div>
Alternatively, if you want to do something with each element, you can use .each():
$('#foo div').each(function(i, elem) {
var $elem = $(elem);
//Do stuff
$('#bar').append($elem);
});
/* This is just for showing that the elements actually moved. */
#foo { background:red; }
#bar { background:blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="foo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div id="bar">
<div class="test">test1</div>
<div class="test">test2</div>
<div class="test">test3</div>
<div class="test">test4</div>
</div>
<div>
On solution is to get both collections and iterate over one of the collections. Also note that you don't need to use .detach. .append will already do that.
var $fooItems = $("#foo .item");
var $barTests = $("#bar .test");
$fooItems.each(function(index, el) {
$(this).append($barTests.eq(index));
});
Example Fiddle
I think there are two solutions for your issue : .childern() function or usiing jQuery selectors
For example using selector :
$("#bar > div")
or using children() function :
$("#bar").children("div");
also look at this post, you may have your answer here : jQuery - get all divs inside a div with class ".container"
I have a child div that needs to be added with a class using jQuery.
<div class="main-content">
<article class="post status-publish">
<div class="post-content>
<div class="vc_row wpb_row vc_row-fluid">
<div class="vc_col-sm-12 wpb_column vc_column_container ">
</div>
</div>
</div>
</article>
</div>
The jQuery code that i tried so far is this:
j('.main-content .post-content').each(function () {
j(this).after().addClass('home-inner-content');
});
This is the result that i am desiring for:
<div class="main-content">
<article class="post status-publish">
<div class="post-content>
<div class="vc_row wpb_row vc_row-fluid home-inner-content">
<div class="vc_col-sm-12 wpb_column vc_column_container ">
</div>
</div>
</div>
</article>
</div>
Any help is appreciated. Thanks
You probably want something like:
j('.main-content .post-content').each(function () {
j(this).children().first().addClass('home-inner-content');
});
.after() is for inserting content, not locating it.
But really, I don't think you need a loop. You can do:
j('.main-content .post-content > *:first-child').addClass('home-inner-content');
The first part selects the elements you want. .addClass() adds a class to each of the elements that got selected.
If I understand you correctly, next code will help.
$('.main-content .post-content>div').addClass('home-inner-content');
$('.main-content .post-content').each(function() {
$(this).children().addClass('home-inner-content');
});
body * {
padding-left: 1em;
}
body *:before {
font-family: monospace;
content: attr(class);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-content">
<article class="post status-publish">
<div class="post-content">
<div class="vc_row wpb_row vc_row-fluid">
<div class="vc_col-sm-12 wpb_column vc_column_container">
</div>
</div>
</div>
</article>
</div>
You don't need to use each function here.
j('.main-content .post-content>div').addClass('home-inner-content');
So I'm very beginner with javascript and would love some help simplifying this code.
I have a series of thumbnails arranged in a specific pattern, and when you click on a thumbnail, I'd like all the thumbnails to disappear, and the corresponding larger image to become visible. Then, when you click on the large image, it disappears and all the thumbnails are visible again. Each thumbnail has its own div id because they all have their unique positions.
I've figured out a way to do it, but it's very repetitive.
HTML:
<style type="text/css">
#largeimage_wrapper {visibility: hidden;}
</style>
</head>
<body>
<div id="thumbnail_wrapper">
<div id="thumbnail1"><img src="thumbnail1.jpg" onClick="get_big1();"/></div>
<div id="thumbnail2"><img src="thumbnail2.jpg" onClick="get_big2();"/></div>
<div id="thumbnail3"><img src="thumbnail3.jpg" onClick="get_big3();"/></div>
...etc
</div>
<div id="largeimage_wrapper">
<div id="large1"><img src="thumbnail1.jpg" onClick="get_thumbs1();"/></div>
<div id="large2"><img src="thumbnail2.jpg" onClick="get_thumbs2();"/></div>
<div id="large3"><img src="thumbnail3.jpg" onClick="get_thumbs3();"/></div>
...etc
</div>
</body>
javascript:
get_big1() {
document.getElementById('thumbnailwrapper').style.visibility='hidden';
document.getElementById('large1').style.visibility='visible';
}
get_thumbs1() {
document.getElementById('thumbnailwrapper').style.visibility='visible';
document.getElementById('large1').style.visibility='hidden';
}
get_big2() {
document.getElementById('thumbnailwrapper').style.visibility='hidden';
document.getElementById('large2').style.visibility='visible';
}
get_thumbs2() {
document.getElementById('thumbnailwrapper').style.visibility='visible';
document.getElementById('large2').style.visibility='hidden';
}
get_big3() {
document.getElementById('thumbnailwrapper').style.visibility='hidden';
document.getElementById('large3').style.visibility='visible';
}
get_thumbs3() {
document.getElementById('thumbnailwrapper').style.visibility='visible';
document.getElementById('large3').style.visibility='hidden';
}
</script>
There must be a better way! I imagine it's not that difficult, I just can't to get a grasp on it yet. Thanks in advance.
There are lots of ways to tackle this. The first and most obvious that comes to my mind is simply to pass a number into a single function which determines the image id to modify:
function get_thumbs(id) {
document.getElementById('thumbnailwrapper').style.visibility='visible';
document.getElementById('large' + id).style.visibility='hidden';
}
<div id="largeimage_wrapper">
<div id="large1"><img src="thumbnail1.jpg" onClick="get_thumbs(1);"/></div>
<div id="large2"><img src="thumbnail2.jpg" onClick="get_thumbs(2);"/></div>
<div id="large3"><img src="thumbnail3.jpg" onClick="get_thumbs(3);"/></div>
...etc
</div>
... And the same thing for get_big().
Alternatively you can use just one function that handles both conditions (big or thumbnail):
function get_img(id, type) {
if (type == 'big') {
document.getElementById('thumbnailwrapper').style.visibility='hidden';
document.getElementById('large' + id).style.visibility='visible';
}
else if (type == 'thumb') {
document.getElementById('thumbnailwrapper').style.visibility='visible';
document.getElementById('large' + id).style.visibility='hidden';
}
else return false;
}
And in the HTML:
<div id="thumbnail_wrapper">
<div id="thumbnail1"><img src="thumbnail1.jpg" onClick="get_img(1, 'big');"/></div>
<div id="thumbnail2"><img src="thumbnail2.jpg" onClick="get_img(2, 'big');"/></div>
<div id="thumbnail3"><img src="thumbnail3.jpg" onClick="get_img(3, 'big);"/></div>
...etc
</div>
<div id="largeimage_wrapper">
<div id="large1"><img src="thumbnail1.jpg" onClick="get_img(1, 'thumb');"/></div>
<div id="large2"><img src="thumbnail2.jpg" onClick="get_img(2, 'thumb');"/></div>
<div id="large3"><img src="thumbnail3.jpg" onClick="get_img(3, 'thumb');"/></div>
...etc
</div>
You could simplify by making it all into two functions and using an input to drive which item is affected:
HTML:
<style type="text/css">
#largeimage_wrapper {visibility: hidden;}
</style>
</head>
<body>
<div id="thumbnail_wrapper">
<div id="thumbnail1"><img src="thumbnail1.jpg" onClick="get_big(1);"/></div>
<div id="thumbnail2"><img src="thumbnail2.jpg" onClick="get_big(2);"/></div>
<div id="thumbnail3"><img src="thumbnail3.jpg" onClick="get_big(3);"/></div>
...etc
</div>
<div id="largeimage_wrapper">
<div id="large1"><img src="thumbnail1.jpg" onClick="get_thumbs(1);"/></div>
<div id="large2"><img src="thumbnail2.jpg" onClick="get_thumbs(2);"/></div>
<div id="large3"><img src="thumbnail3.jpg" onClick="get_thumbs(3);"/></div>
...etc
</div>
</body>
javascript:
get_big(id) {
document.getElementById('thumbnailwrapper').style.visibility='hidden';
document.getElementById('large'+id).style.visibility='visible';
}
get_thumbs(id) {
document.getElementById('thumbnailwrapper').style.visibility='visible';
document.getElementById('large'+id).style.visibility='hidden';
}
A library like jQuery can make this far easier, but here is how you can improve your code using javascript.
First, modify your html to include classes. We will then use these to gather the selected items. Also remove the inline onclick handlers. Try not to mix js and html.
<div id="thumbnail_wrapper">
<div class="thumbnail" id="thumbnail1"><img src="thumbnail1.jpg" /></div>
<div class="thumbnail" id="thumbnail2"><img src="thumbnail2.jpg" /></div>
<div class="thumbnail" id="thumbnail3"><img src="thumbnail3.jpg" /></div>
</div>
<div id="largeimage_wrapper">
<div class="large" id="large1"><img src="thumbnail1.jpg" /></div>
<div class="large" id="large2"><img src="thumbnail2.jpg" /></div>
<div class="large" id="large3"><img src="thumbnail3.jpg" /></div>
</div>
Next it is useful to use CSS to change the visibility of elements instead of directly modifying the style attribute. This makes style changes down the road far easier.
div#thumbnail_wrapper .hidden { visibility: hidden; }
div.large .hidden { visibility: hidden; }
Next we can use getElementsByClassName to attach onclick handlers
var thumbs = document.getElementsByClassName('thumbnail');
var large = document.getElementsByClassName('large');
for (var i = 0; i < thumbs.length; i++) {
thumbs[i].onclick = function() {
//hide all thumbs
document.getElementById('thumbnail_wrapper').classList.add('hidden');
//show large image (i got lazy and sliced)
document.getElementById('large' + this.id.slice(-1)).classList.remove('hidden');
};
}
for (var i = 0; i < large.length; i++) {
large[i].onclick = function() {
//hide large image
this.classList.add('hidden');
//show thumbs
document.getElementById('thumbnail_wrapper').classList.remove('hidden');
};
}
This creates a nice differentiation between styling with CSS, DOM structure for the contained elements and the javascript code that makes changes.
There are a lot of ways you could do this, and it would be very quick and easy in jQuery, but I'm not going to advocate that here because you clearly want to learn about javascript and jQuery can shield you from a lot of that. Try making your functions and function calls generic, like this:
<style type="text/css">
#largeimage_wrapper {visibility: hidden;}
</style>
</head>
<body>
<div id="thumbnail_wrapper">
<div id="thumbnail1"><img src="thumbnail1.jpg" onClick="get_big(1);"/></div>
<div id="thumbnail2"><img src="thumbnail2.jpg" onClick="get_big(2);"/></div>
<div id="thumbnail3"><img src="thumbnail3.jpg" onClick="get_big(3);"/></div>
...etc
</div>
<div id="largeimage_wrapper">
<div id="large1"><img src="thumbnail1.jpg" onClick="get_thumbs(1);"/></div>
<div id="large2"><img src="thumbnail2.jpg" onClick="get_thumbs(2);"/></div>
<div id="large3"><img src="thumbnail3.jpg" onClick="get_thumbs(3);"/></div>
...etc
</div>
</body>
javascript
function get_thumbs(id) {
document.getElementById('thumbnailwrapper').style.visibility='visible';
document.getElementById('large' + id).style.visibility='hidden';
}
function get_big(id) {
document.getElementById('thumbnailwrapper').style.visibility='hidden';
document.getElementById('large' + id).style.visibility='visible';
}