Inkorten jquery-code

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

PHP developer - Digital Agency

Functie Het team telt momenteel 20 collega’s, bestaande uit developers (front- en backend) en het operations team, waaronder ook het management en twee scrum masters vallen. Ze zijn op zoek naar een PHP developer die in staat is zelfstandig te werken. Je komt te werken in één van de drie scrumteams en gaat aan de slag met een project voor de klant. Het fijne hieraan is dat je wel afwisseling hebt qua werk, maar tegelijkertijd doorlopend werkt voor bestaande klanten. Hierdoor krijg je ook de kans om echt de diepte in te gaan en innovatieve technische oplossingen neer te zetten.

Bekijk vacature »

SQL beheerder / ontwikkelaar

Functie omschrijving Voor een klant in omgeving Tiel zijn wij op zoek naar een SQL beheerder met affiniteit met technisch applicatiebeheer. Je krijgt een fijne in-house werkplek waar je gaat werken aan diverse projecten. Dit bedrijf doet het beheer van databases voor een aantal bancaire klanten. Op dit momenten hebben zij ruim 1500 databases in beheer. Jouw werkzaamheden gaan er als volgt uit zien: Je gaat de development afdeling ondersteunen bij het ontwikkelen van MS SQL Scripts. Je zal zowel zelfstandig als in teamverband MS SQL databases installeren & beheren. Je monitort en onderzoekt incidenten en de achterliggende oorzaken. Je

Bekijk vacature »

Senior Organisatieontwikkelaar

Als Organisatieontwikkelaar zorg je ervoor dat we in het magazijn van Coolblue altijd vooruit voetballen op het gebied Medewerker en Organisatie Ontwikkeling. Zo draag je bij aan een toekomstbestendig magazijn waar we klanten én medewerkers elke dag blijven verwonderen. Wat doe je als Senior Organisatieontwikkelaar bij Coolblue? Als Organisatieontwikkelaar werk je voor het magazijn van Coolblue. Je krijgt er energie van om continue te bouwen aan een toekomstbestendige organisatie. Dat doe je samen met 17 collega's in het HR-team, ieder met een eigen specialisme. Je werkt graag zelfstandig en je weet snel je weg te vinden als verandermanager. Ook ben

Bekijk vacature »

Applicatieontwikkelaar Java EE

Bedrijfsomschrijving De IV- organisatie van de Belastingdienst is verantwoordelijk voor en verzorgt de ICT- voorzieningen. Het merendeel van de applicaties wordt op dit moment door de IV- organisatie zelf ontwikkeld, onderhouden en beheerd in het eigen data center. Naast de zorg voor continuïteit op de massale heffing- en inningsprocessen die plaatsvinden binnen een degelijke, stabiele omgeving, wordt er tevens volop gewerkt aan modernisering van het IV- landschap. Dit gebeurt deels intern door gebruik te maken van de expertise die intern aanwezig is, maar ook door het aantrekken van (kant-en-klaar) oplossingen en expertise uit de markt. Functieomschrijving De afdeling IV –

Bekijk vacature »

Medior/Senior Front-end Developers gezocht (Utrech

Functie Het team bestaat uit 10+ gespecialiseerde (veel senior) front-end ontwikkelaars en ontwerpers die werken aan projecten voor klanten van verschillende groottes (kan twee jaar bezig zijn met 1 klant). Je helpt klanten met ingewikkelde front-end vraagstukken, hierbij kun je denken aan: UX/UI design, CI/CD, architectuur en integratie met back-end systemen. De werkzaamheden verricht je op locatie bij de klant, dit is vaak in de Randstad. De organisatiestructuur is plat en er heerst een informele sfeer, zo kun je met vragen dus terecht bij de directie. Er wordt veel nadruk gelegd op het bevorderen van persoonlijke ontwikkeling door middel van

Bekijk vacature »

Senior .NET developer

Functie As a Senior .NET developer you will work in our Research & development team. Our team consists of 17 colleagues! We are currently busy setting up a completely new architecture for a new product. We use VS2022 and .NET 6.0 for our new product. Your function is therefore mainly backend oriented. Since we develop measuring equipment for the chemical industry, it is also very important to develop high-quality software for its control. You are also responsible for designing, implementing and testing new features. For this position its also very important to ensure future-proof and sustainable architecture. Eisen - A

Bekijk vacature »

Software Ontwikkelaar

Functie omschrijving Voor een echt familiebedrijf in de omgeving van 's-Hertogenbosch ben ik op zoek naar een Software Developer. Jij gaat in de functie van Software Developer werken met C# en .NET framework Jij gaat maatwerk software ontwikkelen en softwareoplossingen creëren. Daarnaast optimaliseer je de bestaande software. Oplossingen waar de klant echt iets aan heeft, jij krijgt er energie van op dit te realiseren. Je gaat werken in een Microsoft omgeving(ASP.NET) en gebruikt daarnaast C# en MVC. Samen met het huidige IT team binnen deze organisatie verwerk je de wensen van de klant tot een (eind)product. Bedrijfsprofiel Deze organisatie is

Bekijk vacature »

Senior front-end developer (React)

Functie Momenteel zijn ze op zoek naar een ervaren front-end developer. Als senior werk je nauw samen met 5 collega developers. Een klein scrum team dus, met korte lijnen waardoor jouw ideeën snel tot uitvoering gebracht kunnen worden. De huidige applicaties worden veelal ontwikkeld met o.a. React, Redux, TypeScript. Ze zijn echt op zoek naar een kartrekker in het team. Naast het meedenken over, opzetten en uitvoeren van bijvoorbeeld de architectuur of toepassing van nieuwe technieken krijg je ook veel tijd om de meer junior (front-end) developers te begeleiden. Hierin nemen ze graag de tijd om mensen de ruimte te

Bekijk vacature »

Software Developer

Dit ga je doen Ontwikkelen aan de software dat beschikbaar is op de substations; Ontwikkelen in C++, C, Python en JavaScript. Daarnaast op een Embedded Linux omgeving, opgebouwd met containers en DevOps; Meewerken aan cyber security (OWASP); Uitvoeren/bouwen van geautomatiseerde testen in samenwerking met de Quality Specialist; Vertalen van wensen van de klanten/business naar werkbare/duurzame oplossingen. Hier ga je werken Als Software Ontwikkelaar kom je te werken bij een organisatie gericht op de (internationale) energiemarkt, waar wordt gewerkt voor het verwerven en verwerken van realtime, high quality data. Er wordt gewerkt vanuit het hart van de substations en direct voor

Bekijk vacature »

Fasttrack learning & development voor Java dev

Wat je gaat doen: Wij zoeken enthousiaste en ambitieuze junior en medior ontwikkelaars die toe zijn aan de volgende stap in hun carrière. Wij helpen je op je pad naar senior ontwikkelaar door ons fasttrack learning en development programma. Na een kort en intensief programma ga jij aan de slag bij klanten van DPA. Daarnaast krijg je veel ruimte om je te ontwikkelen als persoon en als specialist. De eerste maand gaan we aan de slag om je certificeringen te behalen waaronder OCP (Oracle Certified Professional). Daarnaast nemen we een deepdive in Spring Boot. Ook laten we je kennismaken met

Bekijk vacature »

Medior Mobile Developer iOS Amsterdam

Functie What will you be doing as Mobile Developer? As an iOS app developer you will work in a multidisciplinary team of app developers, web developers and designers. You will work on world-class apps that will be used by thousands of people. There is a lot of room for self-development on a technical and personal level. Together with the rest of the team you develop in the newest techniques and you go for the best quality. We work with Kotlin Multiplatform Mobile to develop hybrid apps and we guarantee quality with peer reviews, unit testing and we use a CI/CD.

Bekijk vacature »

.NET developer

Functie Als .NET developer wordt jij onderdeel van ons ICT team. In dit multidisciplinaire team ben jij samen met onze senior .NET ontwikkelaar en medior .NET ontwikkelaar verantwoordelijk voor ons ERP systeem. In dit systeem (Navision) ga jij leren ontwikkelen. Wij bieden jou dan ook een gedegen opleiding aan, samen met de ondersteuning van onze Senior .NET developer. Daarnaast ga jij aan de slag met ons portaal geschreven in Sharepoint. Verder ben jij verantwoordelijk voor EDI verkeer en het ontwikkelen binnen het ERP systeem en andere toepassingen en rapportages. Van jou wordt verwacht dat jij het proces goed leert kennen

Bekijk vacature »

Senior C# Software Ontwikkelaar te Zaandam

Bedrijfsomschrijving Deze werkgever heeft als missie om haar klanten op ICT-gebied volledig te ontzorgen. Ze zijn een ICT bedrijf met een verscheidenheid aan ICT oplossingen waaronder Cloud oplossingen en een groot deel van het werk is gericht op software realisatie. Voor de Enterprise-klanten voert het relatief kleine ontwikkelteam waar jij deel uit van kan gaan maken binnen deze organisatie te Zaandam de grootste opdrachten uit. Niet alleen websites en complexe webapplicaties maar ook mobile apps, web services en complete systeemintegraties! Je moet dan denken aan Dynamics, Sharepoint en Salesforce. Je komt hier terecht in een relatief kleine organisatie met ontzettend

Bekijk vacature »

Python Developer

Dit ga je doen Als Python Developer ben je verantwoordelijk voor: Het ontwikkelen van Stuurprogramma's in Python zodat er verbindingen kunnen worden gelegd tussen besturingssystemen en (AV) hardware; Het testen en debuggen van Stuurprorgamma's; Het communiceren met noodzakelijke partijen in gevallen waar extra technische details nodig zijn om een Stuurprogramma te ontwikkelen of problemen op te lossen; Het maken van de nodige technische documentatie (in het Engels); Het participeren in een Scrum/Agile omgeving. Hier ga je werken Deze internationale organisatie is wereldwijd een succesvol producent en leverancier van professionele AV hard- en software. Klanten gebruiken de producten o.a. voor het

Bekijk vacature »

Senior developer (PHP en VB.NET)

Functie De development afdeling bestaat uit 2 teams. Het productteam (10 developers) is verantwoordelijk voor verschillende applicaties met als doel om zoveel mogelijk te automatiseren en uit te werken tot standaard software. Met diverse Solutions Architecten en ervaren developers denken ze voortdurend mee met hun klanten en bouwen ze de basis van het uiteindelijke maatwerk dat wordt geleverd. Hiernaast hebben ze een maatwerk/projectteam. Dit team bestaat momenteel uit 8 developers (junior tot senior) en is verantwoordelijk voor het maatwerk in hun klantprojecten. Momenteel zijn ze op zoek naar een senior developer die aan de slag gaat in het productteam. Hierin

Bekijk vacature »
Thomas R

Thomas R

30/05/2012 19:32:56
Quote Anchor link
Hallo allemaal,

ik gebruik jquery omdat dit simpel is om mee om te gaan en de lengte van de uiteindelijke code minimaal is. Nu heb ik een script gemaakt, maar dit is nogal lang in lengte.. Zouden jullie willen kijken of ik dit kan inkorten, zodat het er wat overzichtelijker uitziet?

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<script>
$(document).ready(function(){
    // Het weergeven van de leden per letter.
    $(".gegevens").hide();
    $('.letter-keuze ul li a.letter').css({'opacity': '0.5'});
    
    $("td.gegevens.senioren:first").show();
    $("td.gegevens.jeugd:first").show();
    $('.letter-keuze ul li:first-child a').animate({'opacity' : '1.0', 'padding-left': '20px'});    
    
    $('#content').css({'min-height':(($('.ledenlijst td:first-child').height())+25)+'px'});
    
    $('.ledenlijst.senioren .letter').click(function(event) {
        event.preventDefault();    
        
        $('.ledenlijst.senioren .letter-keuze a.letter').animate({'opacity': '0.5', 'padding-left': '8px'}, 250);
        $(this).animate({'opacity': '1.0', 'padding-left': '20px'}, 250);
        
        var tablesenioren = $('.ledenlijst.senioren #div-' + $(this).attr("id"));
        $('#content').css({'height':((tablesenioren.height())+15)+'px'});
        
        $('#content').css({'min-height':(($('.ledenlijst.senioren td:first-child').height())+25)+'px'});
        
        $('#footer').css({'margin-top':(($(document).height())-25)+'px'});
        
        $('.ledenlijst.senioren .gegevens').fadeOut(100);                
        $('.ledenlijst.senioren #div-' + $(this).attr('id')).delay(100).fadeIn(250);
    });
    
    $('.ledenlijst.jeugd .letter').click(function(event) {
        event.preventDefault();    
        
        $('.ledenlijst.jeugd .letter-keuze a.letter').animate({'opacity': '0.5', 'padding-left': '8px'}, 250);
        $(this).animate({'opacity': '1.0', 'padding-left': '20px'}, 250);
        
        var tablejeugd = $('.ledenlijst.jeugd #div-' + $(this).attr("id"));
        $('#content').css({'height':((tablejeugd.height())+15)+'px'});
        
        $('#content').css({'min-height':(($('.ledenlijst.jeugd td:first-child').height())+25)+'px'});
        
        $('#footer').css({'margin-top':(($(document).height())-25)+'px'});
        
        $('.ledenlijst.jeugd .gegevens').fadeOut(100);                
        $('.ledenlijst.jeugd #div-' + $(this).attr('id')).delay(100).fadeIn(250);
    });
});
</script>


Alvast bedankt!
 
PHP hulp

PHP hulp

29/03/2024 14:12:15
 
Wouter J

Wouter J

30/05/2012 19:40:38
Quote Anchor link
Je selecteert heel vaak 2 keer hetzelfde element. Bijv. regel 1: $('#content') en dan op regel 37 en 39 nog een keer.
Dat kost allemaal erg veel tijd omdat per aanroep eerst de hele DOM (de hele HTML code) doorzocht moet worden en die gevonden moet worden.

Beter is het om dit element dan op te slaan in een variabele:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
var content = $('#content');

content.css(...);
content.css(...);

Of misschien nog wel beter, gewoon alle methods bij 1 selector koppelen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$('#content').css(...).css(...);



Van de rest is er zo niet heel veel op aan te merken. Maar misschien als je een online voorbeeldje laat zien dat het wel zo is, want er staan soms dingen in die volgens mij wel makkelijker zouden moeten kunnen.
 
Simon ploegh

simon ploegh

30/05/2012 21:00:44
Quote Anchor link
zo te zien heb je 2 gelijke gedeelts.
maar zit je met je kliks waar door je hem herhaalt. nu heeft daar jqeury daar blind() voor.

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
// de div waar op geklikt moet worden
$(".ledenlijst.senioren .letter").bind({
    click: function(){

        $('.ledenlijst.senioren .letter-keuze a.letter').animate({'opacity': '0.5', 'padding-left': '8px'}, 250);
        $(this).animate({'opacity': '1.0', 'padding-left': '20px'}, 250);
        
        var tablesenioren = $('.ledenlijst.senioren #div-' + $(this).attr("id"));
        $('#content').css({'height':((tablesenioren.height())+15)+'px'});
        
        $('#content').css({'min-height':(($('.ledenlijst.senioren td:first-child').height())+25)+'px'});
        
        $('#footer').css({'margin-top':(($(document).height())-25)+'px'});
        
        $('.ledenlijst.senioren .gegevens').fadeOut(100);                
        $('.ledenlijst.senioren #div-' + $(this).attr('id')).delay(100).fadeIn(250);
    }
});
 
Wouter J

Wouter J

30/05/2012 21:39:48
Quote Anchor link
Simon, het is beter om tegenwoordig jQuery.on() te gebruiken i.p.v. jQuery.bind(). Dat is sneller en het werkt beter.

De code wordt dan:
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
31
32
33
$(document).ready(function(){
    
    var content = $('#content');

    // Het weergeven van de leden per letter.
    $(".gegevens").hide();
    $('.letter-keuze ul li a.letter').css({'opacity': '0.5'});
    
    $("td.gegevens.senioren:first, td.gegevens.jeugd:first").show();
    $('.letter-keuze ul li:first-child a').animate({'opacity' : '1.0', 'padding-left': '20px'});    
    
    content.css({'min-height':(($('.ledenlijst td:first-child').height())+25)+'px'});

    $('.ledenlijst.senioren, .ledenlijst.jeugd').on('click', '.letter', function() {
        event.preventDefault();    
        
        var $this = $(this),
            ledenlijst = $(this).parent('.ledenlijst'),
            tablesenioren = $('.ledenlijst.senioren #div-' + $(this).attr("id"));

        $this.find('.letter-keuze a.letter').animate({'opacity': '0.5', 'padding-left': '8px'}, 250);

        $this.animate({'opacity': '1.0', 'padding-left': '20px'}, 250);
        
        content.css({'height': (tablesenioren.height() + 15) + 'px'})
               .css({'min-height':(ledenlijst.find('td:first-child').height() + 25) + 'px'});
        
        $('#footer').css({'margin-top': ($(document).height() - 25) + 'px'});
        
        ledenlijst.find('.gegevens').fadeOut(100);                
        ledenlijst.find('#div-' + $(this).attr('id')).delay(100).fadeIn(250);
    });
});


@Thomas, kijk eens naar de code die ik hierboven heb gegeven. Naar mijn mening zou dit moeten werken en is het een stuk overzichtelijker en sneller.
 
Simon ploegh

simon ploegh

30/05/2012 21:55:18
Quote Anchor link
Oke, bedankt voor de tip
 
Thomas R

Thomas R

31/05/2012 15:42:57
Quote Anchor link
Bedankt voor alle reacties allemaal!
Ik zal eens een voorbeeldpagina in elkaar zetten zodat jullie online kunnen zien hoe het script werkt.



Toevoeging op 31/05/2012 15:57:35:

Ik heb eventjes snel een voorbeeldpagina online gezet: http://www.smash.nl/voorbeeld.php
 



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.