jquery ui plusieurs boîtes de dialogue dynamiques

Question

J'ai donc comme une liste d'utilisateurs sur une page. chaque nom d'utilisateur est cliquable et il affiche les informations de l'utilisateur dans la boîte de dialogue. En ce moment j'utilise une longueur statique pour la liste. Je voudrais jquery pour voir la taille de la liste des utilisateurs et appliquer le code à la liste.

Vérifiez le code ici:

$(function() { 
    var options = { 
      autoOpen: false, 
      width: 'auto', 
      modal: true 
    }; 
    $([1, 2, 3, 4]).each(function() { 
      var num = this; 
      var dlg = $('#dialog-player-' + num).dialog(options); 
      $('#player-link-' + num).click(function() { 
        dlg.dialog("open"); 
        return false; 
      }); 
    }); 

});

J'ai regardé cette page de la documentation: each Ce que j'ai essayé est de sélectionner toutes les divs dans le conteneur "div # parent". Comme suit:

$(function() { 
    var options = { 
      autoOpen: false, 
      width: 'auto', 
      modal: true 
    }; 
    $("div#parent div").each(function() { 
      var num = this; 
      var dlg = $('#dialog-player-' + num).dialog(options); 
      $('#player-link-' + num).click(function() { 
        dlg.dialog("open"); 
        return false; 
      }); 
    }); 

});

Mais cela n'a pas fonctionné. Quelqu'un sait-il d'un autre moyen de le faire?

Answer 1

J'ai remarqué un bug dans votre code et fixe pour vous :

$(function() { 
    var options = { 
      autoOpen: false, 
      width: 'auto', 
      modal: true 
    }; 
    var num = 1; 
    $("div#parent div").each(function() { 
      var dlg = $('#dialog-player-' + num).dialog(options); 
      $('#player-link-' + num).click(function() { 
        dlg.dialog("open"); 
        return false; 
      }); 
      num = num + 1; 
    }); 
}); 

Answer 2

Recherchez les 'enfants' dans les documents - Je pense que vous pourriez avoir besoin de faire défiler les enfants de l'élément en utilisant chacun plutôt que ce que vous avez fait. par exemple.

$ ("parent div #"). Les enfants ('div'). Each (function() {etc ...})

Answer 3

$(function() { 
    var options = { 
      autoOpen: false, 
      width: 'auto', 
      modal: true 
    }; 
    $(['George', 'Ralph', 'Carmine', 'Suzy']).each(function(index, val) { 
      var num = index; 
      var dlg = $('#dialog-player-' + num).dialog(options); 
      $('#player-link-' + num).click(function() { 
        dlg.dialog("open"); 
        return false; 
      }); 
    }); 
}); 

Vous avez eu la bonne idée la première fois. Utilisez simplement l'index fourni par chaque fonction. Pas besoin d'un compteur séparé.