jQuery drie div show en niet meer

Door Robert Jansen op 04-03-2016 14:04 gewijzigd op 04-03-2016 16:12

2.052 views

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.


    <!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>

Bo Ter Ham

04-03-2016 14:53

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

04-03-2016 15:04

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

04-03-2016 16:12 gewijzigd op 04-03-2016 16:53

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.

E WNSMA

04-03-2016 21:39

Hier een simpel jQuery handeling;


    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();
    }

Reageren

Inloggen om te reageren