0

我可以使用 JQuery (Mobile) 使用多个导航命令来获取一个标签作为我编写代码的起点吗？

.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/>");

（上面没有按预期工作）

我看过Here以及Here但无法理解这是如何完成的，甚至是可能的。

问题：如何导航到第一个代码块中标记为 < !-- WANT TO INSERT HERE --> 的区域

4

1 回答 1

2

我最好的猜测是你没有正确终止你的 textarea 元素。我确定您知道这一点，但是如果您直接复制并粘贴它，那么当您终止时，斜线应该放在 textarea 之前。

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

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

更新

我注意到html中的另一个问题。您应该在最后一个元素之后和您的 submit 之前出现，因为它不是选择下拉列表的一部分。

您可能正在寻找而不是 append() 的是 before() 和 after() 语句，它们在返回的元素之前或之后插入，而不是在元素内部。

更复杂的是，jQuery mobile 的样式似乎在实际目标周围添加了额外的 DOM 元素。

我能想到的最好的事情是在您的提交输入中添加一个 id="foo" （在将其移到选择元素之外之后），那么您的代码将是：

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

可能有更好的 jQuery 方法来更好地导航 DOM，因为他们重组它，但我乍一看没有看到任何东西。

于 2013-06-04T15:15:54.497 回答