Share
Met jQuery is het selecteren van HTML-elementen belachelijk eenvoudig. Maar soms willen we de selectie verder verfijnen, wat een gedoe kan zijn als de HTML-structuur ingewikkeld is. In deze zelfstudie verkennen we tien manieren waarop we een reeks omwikkelde elementen waarop we willen opereren kunnen verfijnen en uitbreiden.
Laten we eerst eens kijken naar de eenvoudige webpagina die in de onderstaande afbeelding wordt weergegeven. We zullen elementen in deze tutorial selecteren.
Maar waarom moeten we een aantal elementen verder verfijnen? Is de syntaxis van jQuery's selectie niet krachtig genoeg??
Nou, laten we een voorbeeld zien. Als u op de hierboven genoemde webpagina op een ster klikt, kunnen we de klasse 'aan' toevoegen aan deze ster en elke afzonderlijke ster links ervan. En we willen misschien de achtergrondkleur van de bovenliggende div van de sterren veranderen. Dus we hebben de volgende code.
Accentsconagua
$ ('. star'). click (function () $ (this) .addClass ('on'); // Hoe selecteer je de parent-div van 'this'? // Hoe selecteer je sterren aan de linkerkant van 'deze'? ); In regel 2 selecteren we de ster waarop wordt geklikt met 'deze'. Maar hoe selecteren we de parent-div van de sterren? Ja het is div.rating. Maar er kunnen nog een dozijn andere zijn div.ratings op een pagina, toch? Dus welke is degene die we willen? En hoe selecteren we alle sterren links van 'deze'?
Gelukkig kunnen we met jQuery nieuwe gewikkelde sets van een bestaande set ophalen op basis van de hiërarchische relaties. En dit is gedeeltelijk wat doorkruisende functies doen.
Met deze functie krijgen de directe kinderen een reeks elementen.
Dit kan erg handig zijn in verschillende situaties. Kijk naar de figuur hieronder:
Deze functie filtert elementen uit de ingepakte set met behulp van een doorgegeven selectie-uiting. Alle elementen die niet overeenkomen met de uitdrukking, worden uit de selectie verwijderd.
Het volgende voorbeeld zou vrij eenvoudig moeten zijn. De volledige sterren worden uitgefilterd uit een verzameling van alle vijf sterren.
Helemaal het tegenovergestelde van filter (), niet () verwijdert de overeenkomende elementen uit de ingepakte set.
Zie het onderstaande voorbeeld. Zelfs sterren worden uit de selectie verwijderd, waardoor alleen de oneven overblijven.
Merk op! "Even" en "oneven" selectors zijn geïndexeerd. Ze tellen de index vanaf 0, NIET 1.
Wat als we een paar elementen willen toevoegen aan de ingepakte set? De functie add () doet dit.
Nogmaals, heel eenvoudig. De fotodoos is toegevoegd aan de selectie.
Soms willen we misschien een subset van de ingepakte set verkrijgen op basis van de positie van elementen binnen de set. En slice () is de juiste keuze.
De parent () -functie selecteert de directe ouder van een verzameling elementen.
Zoals te zien is in de onderstaande figuur, is de directe ouder van de eerste ster geselecteerd. Heel handig, hah? Opgemerkt moet worden dat alleen de directe ouder zal worden teruggegeven, dat is waarom het enkelvoud is. Er zal geen grootouder of voorouders worden geselecteerd.
Deze is meervoud! De functie parents () selecteert alle voorouders van een verzameling elementen. Ik bedoel ALLE voorouders van de directe ouder helemaal tot 'lichaam'en'html'. Het is dus het beste om een selector-uitdrukking door te geven om het resultaat te verfijnen.
Door te passeren '.houder'aan ouders (), div.container, die eigenlijk de grootouder van de eerste ster is, is geselecteerd.
Deze functie selecteert alle broers en zussen (broers en zussen) van een reeks elementen. Er kan een uitdrukking worden doorgegeven om het resultaat te filteren.
Kijk naar het voorbeeld:
De functie vorige () selecteert de vorige (één) broer / zus en vorige () selecteert alle vorige broers en zussen van een verzameling elementen.
Dit is superhandig als u een widget voor sterrenbeoordelingen maakt. De vorige broers en zussen van de derde ster zijn geselecteerd.
Deze functies werken op dezelfde manier als vorige en vorige, behalve dat ze de VOLGENDE broers en zussen selecteren.
Laten we eindelijk eens kijken hoe deze functies een echte wereldkoppijn voor ons oplossen.
$ ('. star'). klik (functie () $ (this) .addClass ('on'); // Hoe de parent-div van 'this'? $ (this) .parent (). addClass (te selecteren 'rated'); // Hoe selecteer je sterren aan de linkerkant van 'this'? $ (this) .prevAll (). addClass ('on'); $ (this) .nextAll (). removeClass ('on' );); Dit is het probleem dat we al eerder in deze tutorial noemden, toch? Verschillende doorloopfuncties worden gebruikt in deze coderegels.
Nu hebben we een idee hoe handig traversing-functies kunnen zijn. Ze kunnen nog krachtiger zijn als ze samen worden gebruikt. De uitvoer van de ene functie kan de invoer van een andere zijn - dat wil zeggen, ze zijn koppelbaar.
Bedankt voor het lezen! Hopelijk maakt deze tutorial jouw leven een beetje gemakkelijker bij het selecteren van HTML-elementen met jQuery. Wat denk jij? Welke doorkruisende functies we gemist hebben?
