Can I get at attributes of individual elements that JQuery selects during selection?

I am using JQuery and the JQuery UI Slider to render some controls in my HTML page and I want to set the range of the slider from an attribute in my HTML.

Here is the code I use to initialize the sliders...

$( ".slider" ).slider(
  {
    range: "min",
    value: 0,
    min: 0,
    max: 5,
    slide: handleSlide
  }
);

Of course the max value is hard coded. What I would like to do in my code is...

<div class="slider" id="sliderA" max="10"></div>

but I can't figure out how to get at a开发者_如何学运维n attribute during selection.

I thought I may have access to it via this, like you do in JQuery's .each() but firebug tells me it is the document, so that doesn't work.

I want to do something like...

$( ".slider" ).slider(
  {
    range: "min",
    value: 0,
    min: 0,
    max: blah.getAttribute("max"),
    slide: handleSlide
  }
);

but I can't figure out what blah might be.

Is there an accepted way to do this? I confess that JQuery still has a bit of black magic for me but I am working under the presumption that the selector resolves to an array of objects somehow, so it feels like I should be able to get at the elements.

    $( ".slider" ).each(function()
    {
     $(this).slider(
      {
        range: "min",
        value: 0,
        min: 0,
        max: $(this).attr("max"),
        slide: handleSlide
      }
    );
    });

No, you can't.

Your code creates a single object literal, then passes it to a slider method. Inside the object literal, your outer $ call does not exist.

Instead, you need to call .slider() inside of .each, allowing you to create a separate object literal for each element.
Also, since you'd be creating the object literal in the each callback, it would have this from the each callback.

It looks like your best option is to get the value of your "max" attribute on the fly:

    $('.slider').each(function (index) {
        $(this).slider({
            max: $(this).attr('max'),
            slide: function (event, ui) {
                console.info(ui.value);
            }
        });
    });