23

私が知る限り、セレクターで操作できるのは、DOM にロードされたオブジェクトだけです。これは以下の例に示されています。ボタンがクリックされると、クリック ハンドラーはロードされるページ内の要素を選択しようとして失敗し、以前の html を変更しようとします。リンクページがDOMにロードされる前にクリックハンドラーがトリガーされるため、セレクターは要素に影響を与えないと思います。

私の質問は、html の外部チャンクをインスタンス化し、それを DOM に挿入する前に操作する方法はありますか?

script_1.js:

$(document).ready(function () {
    $("#testButton").click(function () {
        $("#externalPageDiv").html("hello world");
    });
});

外部ページ html:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
    />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
    <script src="script_1.js"></script>
</head>

<body>
    <div data-role="page" id="externalPage" data-add-back-btn="true">
        <div data-role="content" id="externalPageContent">
            <div id="externalPageDiv"></div>external page</div>
    </div>
</body>

メイン ページ HTML:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
    />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
    <script src="script_1.js"></script>
</head>

<body>
    <div data-role="page" id="internalPage_1" data-add-back-btn="true">
        <div data-role="content" id="internalPageContent_1">
            <a href="externalPage.html" id="testButton" data-role="button" rel="external">Page Change</a>
        </div>
    </div>
    <div data-role="page" id="mainPage" data-add-back-btn="true">
        <div data-role="content" id="mainPageContent">Main Page</div>
    </div>
</body>

4

2 に答える 2

16

間違ったコメントを訂正します。はい、このようなことはできますが、jQuery のドキュメントを読むと、DOM http://api.jquery.com/jQuery/#jQuery2にコードが挿入されていると言われています。そのため、以下のコードでも DOM に何も挿入していないように見えますが、実際に挿入されています。

これを試して：

var codeToProcess = "<div>" +
                    "    <div id='myDiv1'>a</div>" +
                    "    <div id='myDiv2'>b</div>" +
                    "    <div id='myDiv3'>c</div>" +
                    "</div>";

var $toProcess = $( codeToProcess );
$toProcess.find( "div" ).addClass( "processed" );

// getting by id before insertion
alert( $toProcess.find( "#myDiv1" ).html() );
alert( $( "#myDiv1" ).html() ); // this will return null, since the divs
                                // were not yet added to the document

$toProcess.appendTo( "#container" );
// or $( "#container" ).html( $toProcess );

// getting by id after insertion
alert( $( "#myDiv2" ).html() );

jsFiddle: http://jsfiddle.net/davidbuzatto/me7T3/

編集：

外部ファイルからコードを挿入するには、load 関数を使用できます。ここで例を見ることができます: http://jsfiddle.net/davidbuzatto/zuFsc/この例では、エコー サービス os jsFiddle を使用して外部ファイルをエミュレートしていることに注意してください。ここを見てくださいJavaでビューファイルをajax応答として出力するにはどうすればよいですか? そしてここhttp://api.jquery.com/load/

于 2012-08-05T03:49:13.777 に答える
10

JavaScript を使用して、DOM 階層に挿入されない DOM 要素を手動で作成し、DOM に挿入する前に必要なだけ操作できます。

ただし、ページ HTML が解析される前にページ HTML によって作成された DOM 要素を操作しようとしても、それはできません。その時点では DOM 要素は存在しないため、最初の段落で説明したように手動で作成しない限り、操作する必要はありません。

一部の操作は、 などの DOM 階層に挿入された DOM 要素に対してのみ機能しますが、DOM 階層にない DOM 要素の場所document.getElementById()など、主な階層にない DOM の一部に対して使用できるメソッドもあります。item.getElementsByClassName()item

jQuery では、デフォルトのコンテキストはドキュメントであるため、 のような単純なセレクター操作$(".foo")は DOM ドキュメント階層内の DOM 要素のみを検索します。ただし、特定のコンテキスト を渡すと$(".foo", item)、jQuery セレクターはメイン ドキュメントではなく、そのコンテキストを検索します。

于 2012-08-05T03:51:02.447 に答える