How to link an undefined number of input type="hidden" to some progress bar of JQuery UI?

Question

I need to link an undefined number of input type="hidden" to some progress bar of JQuery UI (http://jqueryui.com/demos/progressbar/). I never have the same number of hidden and progress bar for each user i use. (If i have 5 user, i will have 5 progress bar and 5 hidden)

I would like to know how could i, dynamically, detect the number of input type="hidden" and progress bar and link them.

Thanks

Answer 1

Is this what you want?

$('input:hidden').each(function(i, input) {
    $('.progressBar').eq(i).progressbar({
        value: Number($(input).val())
    });
});

Example: http://jsfiddle.net/william/LZCqA/

Answer 2

I'm not real sure if this is what you're looking for...

If you're wanting to select all of the inputs of type hidden, the best way to do it would likely to be either set a class on all of the inputs you're interested in or, if you will always be interested in every hidden input on the page, you can just select them all.

Here are examples of how to do each:

$('.my-input-class').each(function(){//do whatever here...});

$('input[type="hidden"]').each(//same thing here...);

Using ".each" in this case is just an example of working with every input. Just doing $('selector') will, obviously, select all of the elements.

Does that help?

Small Update:

After re-reading your question, this may help too... Inside your .each(), you could then poll your jQuery progress bar and set the hidden input to the value of the progress bar. However, I'll admit, I can't really think of a situation where you would want/need to do that.