jQuery drie div show en niet meer

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Robert Jansen

Robert Jansen

04/03/2016 14:04:18
Quote Anchor link
Hallo,

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)
PHP script in nieuw venster Selecteer het PHP script
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
    <!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>

- Ariën -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken.
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Gewijzigd op 04/03/2016 16:12:47 door - Ariën -
 
PHP hulp

PHP hulp

08/12/2024 13:05:49
 
Bo Ter Ham

Bo Ter Ham

04/03/2016 14:53:30
Quote Anchor link
Het probleem is dat je checkt of er 3 divs zijn terwijl er al 4 divs aanwezig zijn. Wat je wil checken is of er meer dan 3 divs zijn (n>3)
 
Robert Jansen

Robert Jansen

04/03/2016 15:04:06
Quote Anchor link
ok, bedankt voor de info.
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?
 
Thomas van den Heuvel

Thomas van den Heuvel

04/03/2016 16:12:54
Quote Anchor link
Indien je X divs hebt en indien X groter is dan 3, dan wil je de eerste (X-3) divs verbergen.

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
 
E WNSMA

E WNSMA

04/03/2016 21:39:46
Quote Anchor link
Hier een simpel jQuery handeling;

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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();
    }
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.