javascript - jQuery .before() 然后找到它的内容并应用 for 循环。我究竟做错了什么

Question

我需要动态添加一些东西，比如容器，然后在 DOM 中找到它并填充数字列表。这是我的做法，但我觉得这是多余的，也许我应该采用另一种方式。唯一的问题是我必须使用 JavaScript 来完成这一切，并且无法对任何容器进行硬编码。这就是为什么我首先添加它，然后尝试找到它。

JS Bin 工作示例 http://jsbin.com/okikohu/1/

代码:

<script>
    $(function(){

      var obj = $('form'),
          total = 6;

        obj.before('<div class="container"/>');
        var container = $('body').find('.container');

        for (var i = 0, limit = total; i < limit; i++) {

                container.append('-<span class="step" id="is'+(i+1)+'">'+(i+1)+'</span>-');

      }

    });
  </script>

<form>some form</form>

Answer 1

obj.before('<div class="container"/>');
var container = $('body').find('.container');

而不是使用 before()然后是 DOM 查询，您可以使用 jQuery(html) constructor 创建元素简单地说insertBefore()它在某个地方，同时仍然保留引用:

var total = 6,
    container = $('<div class="container"/>').insertBefore('form');