Hulp bij if / else statement in js
Ik wil dit vertalen in javascript, maar krijg het niet voor elkaar de if/else statement te integreren.
Dit is de bedoeling:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
IF
$( "ul:nth-of-type(4n+1)" )
.addClass( "links" );
ELSE IF
$( "ul:nth-of-type(4n+4)" )
.addClass( "rechts" );
ELSE
.addClass( "overig" );
$( "ul:nth-of-type(4n+1)" )
.addClass( "links" );
ELSE IF
$( "ul:nth-of-type(4n+4)" )
.addClass( "rechts" );
ELSE
.addClass( "overig" );
Guido
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
if($( "ul:nth-of-type(4n+1)"))
{
.addClass( "links" );
} else if($( "ul:nth-of-type(4n+4)"))
{
.addClass( "rechts" );
} else {
.addClass( "overig" );
}
{
.addClass( "links" );
} else if($( "ul:nth-of-type(4n+4)"))
{
.addClass( "rechts" );
} else {
.addClass( "overig" );
}
Zo? Of bedoel je dit niet?
Guido
Bij addClass moet je dus een id/class opgeven, bijvoorbeeld:
Code (php)
1
$('#id of .class').addClass('MijnClass');
Gewijzigd op 23/08/2014 15:33:19 door Goto Learn
Het gaat om dit:
Code (php)
1
ul:nth-of-type
Hiermee selecteer ik iedere zoveelste UL en die UL wil ik dus een bepaalde class meegeven. Zie hier.
Het onderstaande werkt wel maar is dus niet voldoende:
Code (php)
1
2
2
$( "ul:nth-of-type(4n+1)" )
.addClass( "links" );
.addClass( "links" );
Guido
Gewijzigd op 23/08/2014 15:57:43 door Guido -
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
.test:nth-of-type(1) {
background-color: red;
}
.test:nth-of-type(2) {
background-color: white;
}
.test:nth-of-type(3) {
background-color: blue;
}
.test:nth-of-type(4) {
background-color: orange;
}
</style>
<ul class="test">
<li>UL 1</li>
</ul>
<ul class="test">
<li>UL 2</li>
</ul>
<ul class="test">
<li>UL 3</li>
</ul>
<ul class="test">
<li>UL 4</li>
</ul>
.test:nth-of-type(1) {
background-color: red;
}
.test:nth-of-type(2) {
background-color: white;
}
.test:nth-of-type(3) {
background-color: blue;
}
.test:nth-of-type(4) {
background-color: orange;
}
</style>
<ul class="test">
<li>UL 1</li>
</ul>
<ul class="test">
<li>UL 2</li>
</ul>
<ul class="test">
<li>UL 3</li>
</ul>
<ul class="test">
<li>UL 4</li>
</ul>
Resultaat:
Gewijzigd op 23/08/2014 16:05:45 door Goto Learn
Guido