jQuery drie div show en niet meer
Ik ben bezig met een jquery script. De bedoeling is dat er drie divs getoond worden. Als er een vierde div bij komt dan moet de eerste div hiden. Zodat er altijd drie divs overblijven en niet meer.
Met het onderstaande script doet de browser dit niet.
Mijn vraag is: hoe kan ik dit werkend krijgen?
alvast bedankt.
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
27
28
29
30
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
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var n = $( "div" ).length;
if( n == 3 )
{
$('div:first').hide();
}
});
</script>
<style>
div{background:red;}
</style>
</head>
<body>
<div><p>This is a paragraph with little content.</p></div><!--deze zou verborgen moeten zijn -->
<div><p>This is another small paragraph.</p></div>
<div><p>This is a test</p></div>
<div><p>fourth div </p></div>
</body>
</html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var n = $( "div" ).length;
if( n == 3 )
{
$('div:first').hide();
}
});
</script>
<style>
div{background:red;}
</style>
</head>
<body>
<div><p>This is a paragraph with little content.</p></div><!--deze zou verborgen moeten zijn -->
<div><p>This is another small paragraph.</p></div>
<div><p>This is a test</p></div>
<div><p>fourth div </p></div>
</body>
</html>
- Ariën -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken.
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Gewijzigd op 04/03/2016 16:12:47 door - Ariën -
Maar als ik een vijfde div toevoeg dan hide hij alleen de eerste, dit komt door: $('div:first').hide();
mijn vraag is: hoe hide ik dan de eerste twee?
Dit zou je in een loopje kunnen regelen waarmee je door alle divs in een container (een omvattende div) doorloopt. Zo'n container is handig omdat je dan de ter zaken doende divs al hebt geïsoleerd.
Gewijzigd op 04/03/2016 16:53:39 door Thomas van den Heuvel
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
var n = $("div"),
verschil;
$.each(n, function(i) {
verschil = (i - 3) + 1;
});
// Voor elk verschil remove de eerste
for (var i = 0; i < verschil; i++) {
$("div:first").remove();
}
verschil;
$.each(n, function(i) {
verschil = (i - 3) + 1;
});
// Voor elk verschil remove de eerste
for (var i = 0; i < verschil; i++) {
$("div:first").remove();
}