Question

我可以使用多个导航命令使用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，但无法理解这是如何完成的，甚至是可能的。

问题：如何导航到标记为＆lt;的区域？！ - 想要插入这里 - ＆gt;在我的第一个代码块中

Answer 1

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

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

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

<强>更新

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

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

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

我能想到的最好的事情是在你的提交输入中添加一个id =“foo”（在将它移到select元素之后），然后你的代码就是：

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

可能有一种更好的jQuery方法可以在重组DOM时更好地导航DOM，但我一眼就看不出任何东西。

JQuery Mobile - 使用选择器导航到特定元素

1 个答案: