Могу ли я получить атрибуты отдельных элементов, которые JQuery выбирает во время выделения?

Question

Я использую JQuery и JQuery UI Slider для рендеринга некоторых элементов управления на моей HTML-странице, и я хочу установить диапазон ползунка из атрибута в моем HTML.

Вот код, который я использую для инициализации ползунков ...

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

Конечно, максимальное значение жестко закодировано. То, что я хотел бы сделать в своем коде, это ...

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

но я не могу понять, как получить атрибут при выборе.

Я думал, что могу получить к нему доступ через this, как вы делаете в .each() JQuery, но firebug говорит мне, что это документ, так что это не работает.

Я хочу сделать что-то вроде ...

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

но я не могу понять, что может быть blah.

Есть ли приемлемый способ сделать это? Я признаю, что JQuery все еще имеет немного черной магии для меня, но я работаю в предположении, что селектор каким-то образом разрешает массив объектов, поэтому мне кажется, что я должен быть в состоянии добраться до элементов.

Answer 1

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

Answer 2

Нет, вы не можете.

Ваш код создает литерал одного объекта, а затем передает его в метод slider.Внутри литерала объекта ваш внешний вызов $ не существует.

Вместо этого вам нужно вызвать .slider() внутри .each, что позволит вам создать отдельный литерал объекта для каждого элемента.
Кроме того, поскольку вы создаете литерал объекта в обратном вызове each, он будет иметь this из обратного вызова each.

Answer 3

Похоже, ваш лучший вариант - получить значение вашего атрибута "max" на лету:

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