jquery ui複数の動的ダイアログ

Question

私はページ上のユーザーのリストが好きです。各ユーザー名はクリック可能で、ユーザー情報がダイアログに表示されます。今私はリストに静的な長さを使用しています。 jqueryは、ユーザーのリストがどれだけ大きいのかを確認し、コードをリストに適用したいと思います。

ここにコードをチェックアウト：

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

を}）;

私はドキュメントのこのページを見て：each 私が試みたのは、コンテナ "div＃parent"内のすべてのdivを選択することでした。同様に：

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

}）;

しかし、それは動作しませんでした。誰かがこれを行うための他の方法を知っていますか？

Answer 1

私はあなたのコードのバグに気づき、あなたのためにそれを修正しました：

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

docsで 'children'を参照してください - あなたが行ったことではなく、それぞれを使って要素の子を循環させる必要があると思います。例えば

$（ "のdiv＃親"）。子ども（ 'DIV'）。各（関数（）{など...}）

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

あなたは正しい考えを最初に持っていました。それぞれの関数が提供するインデックスを使用するだけです。別のカウンターは必要ありません。