《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.7　示例：添加函数的返回结果...-优快云博客

本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第3章，第3.7节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看

3.7　示例：添加函数的返回结果

还可以把传给append()的静态字符串换成函数。代码清单3-7演示了函数作为参数的使用方法，它首先会检测是否有足够的空间来添加另外的元素。

代码清单3-7　检测是否有空间来添加更多的元素

00 <!DOCTYPE html>
01 
02 <html lang="en">
03 <head>
04　　<title>A function as argument for append()</title>
05　　<style>
06　　/* 请将下列代码移至一个外部的
07　　　 .css 文件 */
08　　div#template {
09　　　display: none;
10　　}
11　　</style>
12 </head>
13 <body>
14 
15 <div id="append-placeholder">
16　　<p>Test!</p>
17 </div>
18 
19 <button id="append">Add more...</button><br>
20 
21 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
22 
23 <script>
24 // 请将下列代码移至一个外部的.js文件中
25 $(document).ready(function() {
26 
27　　$('#append').click(function() {
28　　　$('#append-placeholder').append(function(index, html) {
29　　　　var more = "<p>There is room for more</p>",
30　　　　　 last = "<p>This is the last one</p>",
31　　　　　 spaceLeft = 160 - $.trim(html).length - last.length;
32　　 
33　　　　if(more.length < spaceLeft)
34　　　　　 return more;
35　　　　else if(spaceLeft > 0)
36　　　　　 return last;
37　　　});
38　　});
39 
40 });
41 </script>
42 </body>
43 </html>

这个例子会一直添加包含文字“There is room for more”的行，直到确定没有足够的空间为止。在停止添加行之前，最后一行显示的文字是“This is the last one”。