如何在jQuery中使用prepend函数来提高代码的效率?

时间:2014-10-08 04:33:25

标签: javascript jquery

我正在尝试编写javascript代码,该代码将模拟一个程序,该程序为可被3整除的数字打印ping,pong为可被5整除的数字,乒乓为可被两者整除的数字,否则只打印数字。我已经开始工作,但我知道我应该使用jQuery来提高效率。我一直在关注prepend方法的教程并稍微阅读它但我无法弄清楚如何将它实现到我的代码中。有什么指针吗?

<ul>
     <script>
     ppCount = prompt("What number would you like me to ping-pong up to?");
     // document.write(console.log(ppCount));
     function pingPong (ppCount) {
          for (var index = 1; index <= ppCount; index += 1) {
               if (index % 3 === 0 && index % 5 === 0) {
                    document.write('<li>' + "ping-pong" + '</li>')
               } else if (index % 3 === 0) {
                    document.write('<li>' + "ping" + '</li>')
                } else if (index % 5 === 0) {
                    document.write('<li>' + "pong" + '</li>')
                } else {
                    document.write('<li>' + index +'</li>')
                }
                document.write('<br>')
            }
        };
        pingPong(ppCount);
    </script>
</ul>

2 个答案:

答案 0 :(得分:0)

从它的外观来看,你正在加载文档的同时正在编写文档的内容。

即,document.write()将内容写入遇到的地方(在这种情况下,在<ul> 内)。我担心用jQuery做同样的事情......


如果您想在创建<ul>后执行此操作,您可以执行以下操作:

$(document).ready(function(){
   var ppCount = new Array(prompt("What number would you like me to ping-pong up to?"));
   function pingPong(ppCount) {
    for (var index = 1; index <= ppCount; index++) {
      if (index % 3 === 0 && index % 5 === 0) {
        $("ul").append('<li>ping-pong</li>')
      } else if (index % 3 === 0) {
        $("ul").append('<li>ping</li>')
      } else if (index % 5 === 0) {
        $("ul").append('<li>pong</li>')
      } else {
        $("ul").append('<li>' + index + '</li>')
      }
    }
  };
  pingPong(ppCount);
})

答案 1 :(得分:0)

http://jsfiddle.net/5kj1m493/

<ul></ul>

$(function() {
 $.each(new Array(prompt("What number would you like me to ping-pong up to?") * 1),
    function(ind) {
       var i = ind + 1;
       var message = !(i % 5) && !(i % 3) ? 'ping-pong' : 
       (!(i % 5) ? 'pong' : (!(i % 3) ? 'ping' : i));
       $('<li>').html(message).appendTo($('ul'));        
  });
});

for循环))