[JQ]Next pakt alle volgende

[BryanD]

Beste tweakers,

Ik heb een scriptje wat de volgende HTML ontcijferen moet:

code:

<div class="slide">
        <div class="page">
            <div class="text">TEXT</div>
            <img src="img/content/img1.jpg" alt="" />
        </div>
    </div>
    
    <div class="slide">
        <div class="page">
            <div class="text">TEXT </div>
            <img src="img/content/img2.jpg" alt="" style="top: -1080px;"/>
        </div>
        <div class="page">
            <div class="text">TEXT</div>
            <img src="img/content/img3.jpg" alt="" style="top: -1080px;"/>
        </div>
    </div>

Hier moet jquery de eerste en de 2e image uit ophalen. Dit werkt...bijna...
Ik heb door gekregen dat dit met next kan en ik heb dat dan ook geprobeerd met de volgende code:

code:

slide = $("#container div.slide");
for(var i = 0; i < slide.length; i++){
  if(slide.eq(i).data("active") == "true"){
           page = slide.children("div.page");
        for(var x = 0; x < page.length; x++){
            if(page.eq(x).data("active") == "true"){
                page.next(".page").each(function(){alert($(this).html());});
                    if(page.next().html() == page.html()){
                        prevPage = page;
                        page = $("#container div.slide").eq(0).children(".page").eq(0);
                        //alert(prevPage.html() + "\n \n"+ page.html());
                        return false;
                    }else{
                        prevPage = page;
                        page = page.siblings(".page");  
                        alert(prevPage.html() + "\n \n"+ page.html());
                        return false;
                    }
                }
            }
        }
    }

echter krijg ik als alert de 1ste en 3de slide te zien...ipv de 1e en 2e, op een of andere manier skipt hij over die 2e slide. Heeft iemand enig idee wat dat ding heeft ik snap er niets meer van.
Volgens mij zou next gewoon de 2e moeten geven (ik dacht zelfs eerst dat next helemaal niets terug geven zou.

overige info: Die data die word uitgelezen staat op de eerste page div.

Mijn vraag dus: Wat gaat hier fout dat hij 1 en 3 pakt ipv 1 en 2?
b.v.d,

[Bosmonster]

Wat bedoel je met "eerste 2"? Eerste 2 uit iedere .slide? Of gewoon algemeen de eerste 2?

In dat laatste geval zou ik gewoon even alle images uitzoeken en alleen de eerste twee filteren met de lt-selector. Scheelt je die 20 regels code.

Je bent nu namelijk heel ingewikkeld aan het doen voor iets dat in 1 enkele selector kan.

JavaScript:

$('#container img:lt(2)')

dus oid

[ Voor 29% gewijzigd door Bosmonster op 17-01-2011 11:52 ]

[BryanD]

Het gaat om een slideshow idee, en ik moet dus de huidige slide en de volgende slide hebben om te kunnen animeren, echter moet het zo zijn de 1 slide uit meerdere pagina's opgebouwd kan worden. Daar is dit voor, en ik ben niet helemaal zeker of die CSS selector dat wel kan.

Edit:
en met eerste 2 bedoel ik van alle image's de eerst en de tweede. in dit geval maar stel dat in de eerste slide 2 pagina's zijn (en dus ook 2 images) dan moet hij van alle images de eerste 2 pakken, die dus in dezelfde slide zitten. Echter is dat bij mijn voorbeeld niet het geval.

Je moet het eigenlijks zo zien: de jquery moet een rij plaatjes maken en hij moet in eerste instantie de eerste 2 images van die lijst pakken. Vervolgens moet hij de 2e en 3e pakken, daarna 3e / 4e...etc...

btw, je moet me wel ontzettend irritant vinden inmiddels , met al mijn vragen

[ Voor 52% gewijzigd door BryanD op 17-01-2011 11:57 ]

[Bosmonster]

Ah, gewoon spelen met lt/gt dan.

Efficienter echter is eerst even een indexje aanleggen van je afbeeldingen, zodat je niet iedere keer relatief zware selectors uit hoeft te voeren. Dan kun je ze gewoon uit een eigen array halen adhv de index.

[BryanD]

kortom iets als:

code:

$(function(){
  var array = [];
  $(img).each(function(){
    var index = $(this).index();
    array[index] = $(this);
  });
});

oid?

[Bosmonster]

Ja, of gewoon

JavaScript:

var images = $('#container img');

Je gebruikt heel veel loopjes die helemaal niet nodig zijn met de filosofie van jQuery. De selector geeft standaard al een verzameling terug. Het gaat er alleen om dat je die cached.

[BryanD]

Oke, dan zal ik eens gaan prutsen met die lt en gt selector's en kijken wat ik te voorschijn toveren kan.
indien ik er niet uit kom hoor je het wel
bedankt voor de hulp (wederom)

[Bosmonster]

Njah het idee is dat je die lt/gt dan eigenlijk niet meer nodig hebt (die zijn redelijk inefficient als je continu toch dezelfde set nodig hebt).

Je kunt als je de verzameling toch al hebt, gewoon de indices pakken daaruit:

JavaScript:

var current = $(images[4]);
var next = $(images[5]);
// etc..

(of get() gebruiken, heeft paar voordeeltjes, maar doet feitelijk hetzelfde)

[ Voor 15% gewijzigd door Bosmonster op 17-01-2011 12:34 ]

[BryanD]

ben ik weer,

Ik heb niet een echt vraagje over de bovenstaande, maar het heeft er wel mee te maken.
Er is nu aardig wat bijgekomen:

--HTML--

code:

 <div class="slide" title="both">
        <!-- Images -->
        <img class="fxin-top fxout-bottom" title="bedazzled1"   src="img/content/be-dazzled.jpg"/>
        <img class="fxin-top fxout-bottom" title="bedazzled2"   src="img/content/be-dazzled2.jpg"/>
        <img class="fxin-top fxout-bottom" title="bedazzled3"   src="img/content/be-dazzled3.jpg" />
        <img class="fxin-top fxout-bottom" title="none"         src="img/content/be-dazzled4.jpg" />
        <!-- Text -->
        <div title="bedazzled1" class="text fxin-fade fxout-left">Slide 1 tekst</div>
        <div title="bedazzled2" class="text fxin-fade fxout-left">Slide 2 tekst</div>
        <div title="bedazzled3" class="text fxin-fade fxout-left">Slide 3 tekst</div>
    </div>

Dit moet de HTML structuur worden.
De effecten van de slides worden dus meegegeven in de classes i.v.m onderhoud, dit maakt het, het (naar mijn mening) makkelijkste. Daar bij staan een paar opvallende dingen:

- De div met calss slide heeft een title waar both in staat (both = zowel tekst als plaatjes, text = alleen text, en images = alleen plaatjes)
- De images hebben een title evenals de tekst divje's, zo wil ik de images aan de div's linken, none betekend geen text voor die slide, er is ook een mogelijkheid tot het weg laten, dit betekend dat de tekst van de vorige slide blijft staan.

Nu ben ik na wat gedenk op het volgende (work in progres) stukje javascript terecht gekomen:

code:

for(var i=0;i<slides.length;i++){
    if($(slides[i]).data("active") == "true"){
        var mode = $(slides[i]).attr("title");   // Posible value's: both, text, images
        switch(mode){
            case 'both':
                images = $(slides[i]+" img");
                text =  $(slides[i]+" .text");
                for(var x=0; x<images.length;x++){
                    if($(images[x]).data("active") == "true"){
                        var linkedText = $(images[x]).attr("title");  // Possible value's *name*, none, empty
                    }
                }
            break;
            
            case 'text':
                text =  $(slides[i]+" .text");
                for(var x=0; x<text.length;x++){
                    if($(text[x]).data("active") == "true"){
                        
                        
                    }
                }
            break;
        }
    }
}

En zoals je ziet is dit een enorme lap, en het is nog maar 1 case, er zullen op deze manier nog aardig wat cases e.d. bij komen.

Het lijkt mij dat dit VEEEEEL simpeler kan. Ik zie alleen niet in hoe, daarom mijn vraag aan jullie:
Hoe zou ik dit simpeler kunnen doen? Zit ik weer eens VEEELSTE ingewikkeld te denken (per-usual)

B.v.d,

[Bosmonster]

Ten eerste: misbruik alsjeblieft niet de title voor dit soort gegevens. Gebruik of classes, of data-attributen.

Verder is mij niet helemaal duidelijk wat je nu probeert te doen (dus dan is het vast veel te ingewikkeld idd ). Maar heb nu ook even geen tijd er heel diep in te duiken helaas.