DOM 操作后的 jQuery Mobile 和 .next()？
Posted
技术标签:
【中文标题】DOM 操作后的 jQuery Mobile 和 .next()？【英文标题】：jQuery Mobile and .next() after DOM manipulation? 【发布时间】：2012-08-04 21:54:03 【问题描述】：好的，我已经开始使用 jQuery Mobiles 预取功能了。我正在使用此页面上指定的链接方法http://jquerymobile.com/test/docs/pages/page-cache.html。唯一的问题是我的刷卡代码无法看到通过预取引入的页面。请参阅此 js fiddle 以获取该问题的工作示例。
http://jsfiddle.net/UurQC/1/
任何人都对尝试获取 .next 以查找新页面有任何想法。我也尝试通过
来定位他们div.ui-page
在 firebug 中它仍然是一个空的选择器。
【问题讨论】：
【参考方案1】：问题是您试图选择下一个 DOM 元素，而不是下一个 pesueo-page 元素。由于您是在 DOM 加载后添加最后一页，因此它实际上是在另一个元素之后添加的（因此 .next() 正在选择另一个元素而不是伪页面）。
我变了：
$(this).next("div:jqmData(role='page')");
$(this).prev("div:jqmData(role='page')");
收件人：
$(this).nextAll("div:jqmData(role='page')").first();
$(this).prevAll("div:jqmData(role='page')").first();
选择所有前一个/下一个伪页面，然后只选择其中的第一个。
这是一个演示：http://jsfiddle.net/UurQC/2/
如果您不为滑动事件委托事件处理程序，则滑动事件处理程序将不会为动态放置的伪页面运行。解决方法如下：
$(document)
.on("swipeleft", "div:jqmData(role='page')", function()
var $nextPage = $(this).nextAll("div:jqmData(role='page')").first();
// swipe using id of next page if exists
if ($nextPage.length > 0)
$.mobile.changePage($nextPage, transition: 'slide' );
)
.on("swiperight", "div:jqmData(role='page')", function()
var $prevPage = $(this).prevAll("div:jqmData(role='page')").first();
// swipe using id of next page if exists
if ($prevPage .length > 0)
$.mobile.changePage($prevPage, transition: 'slide', reverse : true );
);
这是一个演示：http://jsfiddle.net/UurQC/3/
更新
这是 DOM 的外观以及为什么需要上述内容：
<div data-role="page" id="text_0" data-url="text_0" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 452px; "></div>
<div data-role="page" id="text_1" data-url="text_1"></div>
<div data-role="page" id="text_2" data-url="text_2"></div>
<script type="text/javascript">...</script>
<div data-role="page" id="text_3" data-url="text_3"></div>
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"></div>
请注意，这不是完整的 HTML，而只是 <body> 元素的直接子元素。
请注意，在 JSFiddle 在 <script> 标记中添加您的 JS 代码后，动态创建的伪页面将添加到 DOM。当不在 JSFiddle 上运行时，这也是一个问题，因为 jQuery Mobile 在初始化时添加了一个加载器元素。
【讨论】：
谢谢，确实有效。那么 .next 是否仅适用于页面首次加载时所在的 DOM？我对那部分有点困惑，因为我认为 .next 会检查当前的 DOM。还有关于使用类演示处理特定于一组页面的代码的任何提示？ @hcker2000.next() 只选择紧邻的同级元素，所以如果你传入一个选择器并且紧邻的下一个元素与选择器不匹配，你就不会选择任何东西。这就是为什么有一个.nextAll() 方法允许你传递一个只匹配某些兄弟的选择器。 .nextAll() 和 .prevAll() 很好，因为如果您使用 .siblings()，您必须在该列表上进行工作以检测哪个最接近当前选择。
好的，我现在明白了。感谢您提供的额外信息，我不知道为什么我认为 .next 做了 .nextAll 所做的事情。以上是关于DOM 操作后的 jQuery Mobile 和 .next()？的主要内容，如果未能解决你的问题，请参考以下文章
使用 jQuery Mobile 遍历 HTML DOM 树