JQuery Mobile Slider ne rend pas correctement

Question

J'écris une application mobile JQuery. Dans cette application, j'ai besoin de construire dynamiquement une liste de curseurs. Cependant, chaque fois que je construis ma liste, seule la liste déroulante de style HTML classique est rendue. Je veux que le curseur mobile JQuery soit rendu. Dans une tentative de construire cette liste dynamique, j'ai écrit ce qui suit:

$.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(); 
    } 

Lorsque le code est exécuté, je reçois une erreur JavaScript qui dit:

Uncaught TypeError: Object # n'a pas de méthode 'curseur'

Si je n'utilise pas le "sliders [i] .slider();" code, la liste déroulante HTML traditionnelle est toujours affichée à la place du curseur JQuery Mobile. Quelqu'un peut-il aider à identifier ce que je fais mal?

Merci!

Answer 1

Je pense que vous devez créer un nouvel objet JQuery lors de l'utilisation dans une boucle comme ça ...

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

See this post for more info (plus précisément la réponse de SLaks)

Bien sûr, vous pouvez obtenir par sans utiliser la boucle du tout quand même ...

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

Answer 2

en fait, vous ne avez pas besoin de cette boucle for statement.You peut appeler le slider() méthode sur tous les curseurs avec cette déclaration;

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