[jQuery] Meerdere progressbars initialiseren

[dxta]

Ik heb een overzichtspagina waarop meerdere jQuery UI progressbars moeten komen, elk met een andere value. De hoeveelheid progressbars is dynamisch.

Op dit moment worden de <div>'s voor de progressbars als volgt gedefinieerd:

HTML:

{foreach from=$list key=id item=i}
<div class="progressbar"><div class="progress-label"><span>{$i.value}</span>%</div></div>
{/foreach}

De bijbehorende jQuery code voor het initaliseren van een afzonderlijke progressbar is natuurlijk

JavaScript:

$( "#progressbar" ).progressbar({value: 37});

Mijn vraag is als volgt: hoe krijg ik het volgende voor elkaar:

HTML:

<div id="progressbar1"><div class="progress-label"><span>3</span>%</div></div>
$( "#progressbar1").progressbar({value: 3});
<div id="progressbar2"><div class="progress-label"><span>10</span>%</div></div>
$( "#progressbar2").progressbar({value: 10});
<div id="progressbar3"><div class="progress-label"><span>15</span>%</div></div>
$( "#progressbar3").progressbar({value: 15});

zonder voor elke progressbar een ID aan te maken en dit later weer te moeten terugzoeken?

[RobIII]

JavaScript:

$(".progressbar:nth-of-type(1)").progressbar({value: 13});
$(".progressbar:nth-of-type(2)").progressbar({value: 37});
$(".progressbar:nth-of-type(3)").progressbar({value: 99});
$(".progressbar:nth-of-type(4)").progressbar({value: 1});
$(".progressbar:nth-of-type(5)").progressbar({value: 50});

http://jsfiddle.net/RobIII/XQFVe/

[ Voor 7% gewijzigd door RobIII op 02-05-2014 14:52 ]

[Snake]

RobIII schreef op vrijdag 02 mei 2014 @ 14:51:

JavaScript:

$(".progressbar:nth-of-type(1)").progressbar({value: 13});
$(".progressbar:nth-of-type(2)").progressbar({value: 37});
$(".progressbar:nth-of-type(3)").progressbar({value: 99});
$(".progressbar:nth-of-type(4)").progressbar({value: 1});
$(".progressbar:nth-of-type(5)").progressbar({value: 50});

http://jsfiddle.net/RobIII/XQFVe/

Kan je niet beter de value op een element zetten met

data-value

?

[Yoram]

Weet niet of het de juiste manier is, maar voor mij werkt het altijd. Ik doe zoiets door de class voor elke progressbar het zelfde te houden en het via het ID elke bar apart aan te sturen zegmaar.

HTML:

 <div class="progressbar" id="progressbar1">enz..</div>

Als je alles wilt initalizeren doe je dat via de class:

HTML:

 $(".progressbar").progressbar();

En als je de waarde wilt aanpassen doe je voor elke progressbar

HTML:

 $("#progressbar1").progressbar({value: 50});

[Woy]

Aangezien dit puur clientside javascript/html is past dit beter in WEB. Dus ik verplaats het topic daar heen.

[RobIII]

Snake schreef op vrijdag 02 mei 2014 @ 14:54:
[...]
Kan je niet beter de value op een element zetten met

data-value

?

TS gebruikt jQuery UI en die doet dat kennelijk zo ik ben gewoon uitgegaan van door TS gegeven code en heb dat "werkend gemaakt" volgens de vraag "zonder voor elke progressbar een ID aan te maken en dit later weer te moeten terugzoeken?". Ik had 't sowieso anders aangepakt (en waarschijnlijk gewoon elke PB een eigen id gegeven)

[ Voor 20% gewijzigd door RobIII op 02-05-2014 15:05 ]

[dxta]

Goed, uiteindelijk toch maar met ID's genereren en in bijbehorende JS code de ID's opzoeken opgelost. Thanks voor de tips

Een conceptuele vervolgvraag dan:
Stel ik heb een random <div> en ik wil hier een stuk JS op uitvoeren:

HTML:

<div>Something</div>
<script>$("xxx").hide()</script>

Wat zou er dan op de plaats van de xxx kunnen staan om de div te kunnen targetten zonder gebruik te hoeven maken van ID's of is dit uberhaupt niet mogelijk?

[ Voor 3% gewijzigd door dxta op 02-05-2014 15:46 ]

[gekkie]

Dxta schreef op vrijdag 02 mei 2014 @ 15:36:
Een conceptuele vervolgvraag dan:
Stel ik heb een random <div> en ik wil hier een stuk JS op uitvoeren:

HTML:

<div>Something</div>
<script>$("xxx").hide()</script>

Wat zou er dan op de plaats van de xxx kunnen staan om de div te kunnen targetten zonder gebruik te hoeven maken van ID's of is dit uberhaupt niet mogelijk?

"div", maar jij wil waarschijnlijk selecteren op iets binnen het div element, tsja helaas pindakaas er is geen selector voor de inhoud van elementen. Zou performance wise nogal apenootjes zuigen .. en ook qua selector een zooitje worden .. aangezien de inhoud van een <div></div> complete lappen HTML zou kunnen zijn.

maar ik zou zo zeggen hier http://api.jquery.com/category/selectors/ is je gereedschapskist.

[noes]

Wat betreft je progressbars, ik zou het zo oplossen:

JavaScript:

 
$('.progressbar').each(function(){
    $(this).progressbar({ 
        value: parseInt($(this).text(), 10))
    }); 
});

De HTML die je genereert hoeft alleen de class "progressbar" te hebben. De waarde (aantal procent) van de progressbar lees je simpelweg uit de tekst. Eventueel kan je dit ook doen met een data-attribuut, maar in dit geval kan je de progressbar leesbaar houden zonder JS door het gewoon in de tekst te plaatsen.

Uitleg code:
Iedere <div class="progessbar">...</div> wordt 'bezocht' door de .each(), de $(this) is vervolgens die div die je op dat moment 'bezoekt'. Daar lees je de tekst uit ($(this).text()), wat je meegeeft aan je progressbarscriptje zoals je eerder al deed.

Veel elegantere oplossing dan dat je het per progressbar handmatig doet. Eventuele id's zijn nog wel handig om met javascript de progressbars te updaten.

---

Wbt je conceptuele vervolgvraag: In de jQuery API kan je opzoeken hoe je je elementen allemaal kan selecteren. Houd er rekening mee, eenvoudiger is sneller. Bijvoorbeeld een ID is razendsnel, een class alweer iets minder. Bij een selector zoals [name$="value"] (attribuut "naam" eindigt op "value"), zal de code ieder element af moeten gaan met een name en die moeten vergelijken met jouw value. Mocht je dit ooit nodig hebben, maak dan eerst een selectie, bijvoorbeeld:

JavaScript:

 $('input').filter('[name$="value"]')