Question

我曾经能够掌握

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

在alpha中使用jQuery 1.5.2，但不再适用于jQuery 1.6.1。有什么变化吗？

完整代码 - 将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专家。

Answer 1

~~造成差异的变化是“响应式设计助手类：现已弃用”~~

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

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

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

在查询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()。

相关 - jQuery mobile $(document).ready equivalent

Answer 2

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

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()

jQuery Mobile Beta：不能再使用$（'[data-role = header]'）？

2 个答案: