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

});

나는 문서의 이 페이지를 보았습니다. 각내가 시도한 것은 "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

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

당신은 처음부터 올바른 생각을 가지고 있었습니다.각 함수에서 제공하는 인덱스를 사용하세요.별도의 카운터가 필요하지 않습니다.

Answer 3

문서에서 '어린이'를 찾아보십시오 - 나는 당신이 한 일이 아닌 각각을 사용하여 요소의 어린이를 순환해야 할 수도 있다고 생각합니다. 예를 들어

$ ( "div#parent"). children ( 'div'). 각 (function () {etc ...})