3

だから私は今jQueryの.load（）$("#example").load('./uri.ext #ID')を使っていましたが、そのようにチェーンするように構成することはできないようです：

$("#example").load('./uri.ext #ID1').load('./uri.ext #ID2').load('./uri.ext #ID3')

もちろん、DIVのテンプレートファイルなど、ページを動的に構築し、HTMLを文字列変数などに格納しない場合に役立ちます。さらに、これらのいくつかを1つのファイルに保持することもできます。

理想的には、そのコマンドでそのようなものをネストしたいと思います。

<div id="example">
    <div id="ID1">
        <div id="ID2">
            <div id="ID3">
            </div>
        </div>
    </div>
</div>

私が抱えている問題は2つあります。まず、リクエストのasync : trueプロパティにより次のリクエストが発生し、プレースメントが意図したとおりに実行されません。次に、ネストされた$（ "＃example"）。load（'./ uri.ext＃ID1'）。ajaxCompletes（function（）{/ next .load（）in sequence /}） `を実行しようとしましたが、最終的には終了せず、それらのファイルに対する要求を送信し続けた再帰トラップ。

私が試みたような構文/方法で私が求めていることを達成する方法について何か考えはありますか？また、これが問題ではなく、jQueryのチェーンの私の部分についての誤解である場合は、説明をいただければ幸いです。

4

2 に答える 2

5

これを実現するには、コールバック関数にそれらをネストする必要があります。

$('#example').load('./uri.ext #ID1', function() {
  $('#ID1').load('./uri.ext #ID2', function() {
    $('#ID2').load('./uri.ext #ID3', function() {
      // load successful
    });
  });
});

ES6標準の編集：

 $('#example').load('./uri.ext #ID1', () => {
      $('#ID1').load('./uri.ext #ID2', () => {
        $('#ID2').load('./uri.ext #ID3', () => {
          // load successful
        });
      });
    });
于 2010-09-17T14:24:01.823 に答える
0

質問と回答に賛成した。

他の人がそれを基に構築したい場合に備えて、再帰呼び出しを使用してもう少し洗練されたソリューションを提供しています。これは、元の質問のコンテキストに直接答えるものではないことに注意してください。それは私自身の解決策の文脈にありますが、考え方は同じです。

var App = App || {};

App.Quiz = (function ($) {
    "use strict";

    var _templates = [{ target: "#quiz_main_template", url: "/UserControls/Quiz/Quiz_Main.tmpl.htm" },
        { target: "#quiz_media_left_template", url: "/UserControls/Quiz/Quiz_Media_Left.tmpl.htm" },
        { target: "#quiz_media_right_template", url: "/UserControls/Quiz/Quiz_Media_Right.tmpl.htm" },
        { target: "#quiz_no_media_template", url: "/UserControls/Quiz/Quiz_No_Media.tmpl.htm" }]

    function loadTemplates(templates, callback) {
        if (templates.length) {
            var nextTemplate = templates.pop();
            $(nextTemplate.target).load(nextTemplate.url, loadTemplates(templates, callback));
        } else {
            callback.call();
        }
    }

    function init() {
        loadTemplates(_templates, function () { alert("Done!");})
    }

    return {
        init: init
    };
})(jQuery);

$(function () {
    App.Quiz.init();
});
于 2017-03-22T14:42:17.333 に答える