JQuery Mobile - 使用选择器导航到特定元素
[英]JQuery Mobile - navigating to a specific element using selectors
问题描述
Can I use multiple navigation commands using JQuery (Mobile) to get at a piece of a tag as my begin point for writing code? 
我可以使用多个导航命令使用JQuery（Mobile）获取一个标记作为编写代码的起点吗？
.html 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 .js文件
$("form[data-id='form_header']").append("<textarea name='ya'>Text<textarea/>");
(Above not working as expected) （以上不按预期工作）
I've looked Here as well as Here but cannot understand how this is done, or even possible. 我看过这里以及这里，但无法理解这是如何完成的，甚至是可能的。
Question: How can I navigate to the area marked as < !-- WANT TO INSERT HERE -- > in my first code block 问题：如何在我的第一个代码块中导航到标记为<！ - 想要插入此处 - >的区域
1 个解决方案
解决方案1
2 已采纳 2013-06-04 15:15:54
My best guess would be the that you're not terminating your textarea element properly. 我最好的猜测是你没有正确终止你的textarea元素。 I'm sure you know this but if you copied and pasted that directly, the slash should go before textarea when you terminate. 我确定你知道这一点，但是如果你直接复制并粘贴它，那么当你终止时，斜线应该在textarea之前。
$("form[data-id='form_header']").append("<textarea name='ya'>Text</textarea>");
http://jsfiddle.net/eXpES/1/ http://jsfiddle.net/eXpES/1/
Update 更新
I noticed another issue in the html. 我注意到html中的另一个问题。 Your should come after the last element and before your submit , since it's not part of the select dropdown. 您应该在最后一个元素之后和提交之前，因为它不是选择下拉列表的一部分。
What you may be looking for instead of append() are the before() and after() statements, which insert immediately preceding or following the element returned, instead of inside the element. 您可能正在寻找的而不是append（）是before（）和after（）语句，它们在返回的元素之前或之后插入，而不是在元素内部。
Adding to the complexity is the fact that jQuery mobile's styles seem to add extra DOM elements surrounding the actual targets. 更复杂的是，jQuery mobile的样式似乎在实际目标周围添加了额外的DOM元素。
The best thing I could come up with is adding an id="foo" to your submit input (after moving it outside the select element), then your code would be: 我能想到的最好的事情是在你的提交输入中添加一个id =“foo”（在将它移到select元素之外）之后，你的代码将是：
$("#foo").parent().before("<textarea name='ya'>Text</textarea>");
There may be a better jQuery way to better navigate the DOM as they restructure it, but I didn't see anything at first glance. 可能有一种更好的jQuery方法可以在重组DOM时更好地导航DOM，但我乍看之下并没有看到任何东西。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.