jQuery Mobile Beta：不能再使用 $('[data-role=header]')？答案

【问题标题】：jQuery Mobile Beta: can no longer use $('[data-role=header]')?jQuery Mobile Beta：不能再使用 $('[data-role=header]')？
【发布时间】：2011-07-01 14:04:38
【问题描述】：

我曾经能够掌握

$('[data-role=header]').first().height()

在 jQuery 1.5.2 的 alpha 版本中，但不再可以在 jQuery 1.6.1 的 beta 版本中。有什么变化吗？

完整代码 - 这会将 0 写入 console.log...

<!DOCTYPE html> 
<html> 
 <head> 
 <title>Page Title</title> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
 <script type="text/javascript"
  src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 console.log($('[data-role=header]').first().height());
 });
 </script>
</head> 
<body> 
<div data-role="page" id="home">

       <div data-role="header">
       <h1>Header</h1>
       </div>
 <div data-role="content">
         //lots of code
        </div>
 </div>
 </body>
</html>

但是，将其更改为 jQuery 1.5.2 和 jQuery Mobile alpha：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>

它会写入标题 div 的非零高度。

顺便说一句，在 jQuery 1.6.1 但没有 jQuery Mobile 时它也是非零的。所以这与 jQuery Mobile 渲染有关。

在release notes 中看不到任何提示可能发生的事情，但我不是 jQuery 专家。

【问题讨论】：

它在 Alpha/Beta 中写了什么，或者你期望它写什么？
在 alpha 中它会写一些非零的东西，因为 div 的高度是非零的。在测试版中它为零。顺便说一句，使用 jQuery 1.6.1 但没有 jQuery Mobile 它也非零（已编辑问题以反映这一点）。
你可以试试这个：$('[data-role="header"]').first().height()

标签： javascript jquery jquery-mobile

【解决方案1】：

~~导致差异的更改是“响应式设计助手类：现已弃用”~~

我们包含一组responsive design helper classes，旨在轻松构建响应式设计，以适应各种屏幕宽度的布局。当时，我们在主体上使用了一个动态附加的最小和最大宽度类的系统，这些类在加载、调整大小和方向更改事件时更新，作为 Internet Explorer 不支持媒体查询的限制的解决方法。

基本上，该页面将 min-height 设置为 beta 中的当前页面高度，这将覆盖 alpha 中的 .landscape { min-height: 300px; }。

如果您想要更改页面布局，您似乎需要使用CSS Media Queries，或者如果您需要固定高度，您可以在标题上添加 CSS style="height:43px"。

当您查询height() 时，页面似乎还没有准备好。 There is no document.ready for jQuery.mobile。它没有解释为什么 alpha 和 beta 之间存在差异，但我猜代码路径发生了变化，暴露了这个问题。

将查询包装在不同的事件中，按预期返回高度。

$("div:jqmData(role='page')").live('pageshow',function(){
    console.log($('[data-role=header]').first().height());
});

我通过检查 Chrome 控制台中 DOM 元素的 offsetHeight 发现了这一点，该元素非零，但正如您所报告的，height() 始终报告 0。然后我在单击时创建了一个链接输出高度和它非零。然后我意识到height() 在页面完全准备好之前就被调用了。

【讨论】：

【解决方案2】：

看起来他们确实改变了一些语法，文档：

http://jquerymobile.com/demos/1.0b1/docs/api/methods.html

当通过 jQuery 查找元素时移动数据属性，请使用自定义选择器：jqmData()，因为它自动合并命名空间数据属性进入查找时它们正在使用中。例如，改为调用 $("div[data-role='page']"), 你应该使用 $("div:jqmData(role='page')"), 其中内部映射到 $("div[data-"+ $.mobile.ns +"role='page']") 没有强制你连接一个命名空间手动进入您的选择器。

试试这个：

$("div:jqmData(role='header')").first().height()

【讨论】：