0

JQuery (モバイル) を使用して複数のナビゲーション コマンドを使用して、コードを記述する開始点としてタグの一部を取得できますか?

.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <script type="text/javascript" src="source.js"></script>
</head>
<body>
<div data-role="page" id="home">
    <div data-role="header">
    </div>
    <div data-role="content">
        <form name="form_header" id="form_header" data-id="form_header" onsubmit="alert('Call function to do search..to be implemented')" action="post">
            <label for="form_header" form="form_header" class="select">Choose fields:</label>
            <select name="select_menu" id="select_menu" size="6" form="form_header" multiple="multiple" data-native-menu="false" data-placeholder="true" placeholder="student_id">
                <option>Search By:</option>
                <option for="form_header" data-num="1" value="student_id" selected="selected">Student ID</option>
                <option for="form_header" data-num="2" value="parking_permit">Parking Permit</option>
                <option for="form_header" data-num="3" value="license_plate">License Plate</option>
                <option for="form_header" data-num="4" value="first_name">First Name</option>
                <option for="form_header" data-num="5" value="last_name">Last Name</option>
                <option for="form_header" data-num="6" value="lot_name">Lot Name</option>
                <!-- WANT TO INSERT HERE -->                    
                <input for="form_header" type="submit" value="Submit"></input>
            </select>

.js

$("form[data-id='form_header']").append("<textarea name='ya'>Text<textarea/>");

（上記は期待どおりに動作しません）

私はここと同様にここを見てきましたが、これがどのように行われるか、または可能であるかさえ理解できません。

質問: 最初のコード ブロックで < !-- WANT TO INSERT HERE -- > とマークされた領域に移動するにはどうすればよいですか?

4

1 に答える 1

2

私の最善の推測は、テキストエリア要素を適切に終了していないということです。これはご存知だと思いますが、それを直接コピーして貼り付けた場合、終了時にテキストエリアの前にスラッシュを配置する必要があります。

$("form[data-id='form_header']").append("<textarea name='ya'>Text</textarea>");

http://jsfiddle.net/eXpES/1/

アップデート

html に別の問題があることに気付きました。選択ドロップダウンの一部ではないため、最後の要素の後、 submit の前に配置する必要があります。

append() の代わりに探しているのは、要素の内部ではなく、返された要素の直前または直後に挿入する before() および after() ステートメントです。

複雑さを増しているのは、jQuery モバイルのスタイルが、実際のターゲットを囲む余分な DOM 要素を追加しているように見えるという事実です。

私が思いつく最善の方法は、送信入力に id="foo" を追加することです (select 要素の外に移動した後)。コードは次のようになります。

$("#foo").parent().before("<textarea name='ya'>Text</textarea>");

DOM を再構築する際に DOM をより適切にナビゲートするためのより良い jQuery の方法があるかもしれませんが、一見しただけでは何もわかりませんでした。

于 2013-06-04T15:15:54.497 に答える