jQuery Mobile Slider无法正确呈现

Question

我正在编写一个JQuery移动应用程序。 在此应用程序中，我需要动态生成一个滑块列表。 但是，无论何时构建列表，都只会呈现传统的HTML样式的下拉列表。 我希望呈现JQuery移动滑块。 为了尝试动态构建此列表，我编写了以下内容：

  $.each(result.Results, function (i, r) {
    var s = "<li><div data-role='fieldcontain'><label for='person" + i + "'>" + r.FullName + "</label>";
    s += "<select name='person" + i + "' id='person" + i + "' data-role='slider'>";
    s += "<option value='false' selected='selected'>No</option><option value='true'>Yes</option>";
    s += "</select></div></li>";

    $("#personList").append(s);
  });
  $("#personList").listview("refresh");

  var sliders = $("#personList [data-role=slider]");
  for (var i = 0; i < sliders.length; i++) {
    sliders[i].slider();
  }

执行代码后，我收到一个JavaScript错误，内容为：

未捕获的TypeError：对象＃没有方法“滑块”

如果我不使用“ sliders [i] .slider（）;” 代码，仍然呈现传统的HTML下拉列表，而不是JQuery Mobile滑块。 有人可以帮忙确定我在做什么错吗？

谢谢！

Answer 1

我认为在像这样的for循环中使用时，您需要创建一个新的JQuery对象。

  var sliders = $("#personList [data-role=slider]");
  for (var i = 0; i < sliders.length; i++) {
    $(sliders[i]).slider();
  }

有关更多信息 ，请参见此帖子 （更具体地说，是SLaks的回答）

当然，您仍然可以完全不使用循环来实现...

$("#personList [data-role=slider]").slider();

Answer 2

实际上，您不需要for循环语句。您可以使用此语句在所有滑块上调用slider()方法。

$("#personList [data-role=slider]").slider();