jquery ui mehrere dynamische Dialoge

Question

So habe ich wie eine Liste von Benutzern auf einer Seite. Jeder Benutzername ist anklickbar und zeigt die Benutzerinformationen im Dialogfeld an. Im Moment verwende ich eine statische Länge für die Liste. Ich möchte jquery sehen, wie groß die Liste der Benutzer ist und den Code auf die Liste anwenden.

Schauen Sie sich den Code hier:

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

});

Ich schaute auf dieser Seite der Dokumentation: each Was ich versuchte, ist, alle Divs in Container "div # Eltern" zu wählen. Wie so:

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

});

Aber das hat nicht funktioniert. Kennt jemand eine andere Möglichkeit, dies zu tun?

Answer 1

Ich habe einen Fehler im Code bemerkt haben und es für Sie festgelegt :

$(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

Nachschlagen 'Kinder' in der Dokumentation - Ich denke, Sie müssen möglicherweise durch die Kinder des Elements mit jedem Zyklus statt, was Sie getan haben. z.B.

$ ("div # parent"). Kinder ('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; 
      }); 
    }); 
}); 

Sie hatte die richtige Idee zum ersten Mal. Verwenden Sie einfach den von jeder Funktion gelieferten Index. Kein Bedarf für einen separaten Zähler.