Javascript JQuery步骤包装器

我正在使用，但我的表单结构已生成，无法更改。我的结构与此类似：

<form method="POST" action="#" id="form">
    <div>
        <div>some necessary content</div>
        <div>some necessary content</div>

        <div id="" class="wrapper" data-name="group">
            <div class="another-class">
                <label>Group</label>
            </div>
            <div class="some-other-class">
                more codes
            </div>
        </div>

        <div id="" class="wrapper" data-name="group">
            <div class="another-class">
                <label>Group</label>
            </div>
            <div class="some-other-class">
                more codes
            </div>
        </div>


        <div class="submit">
            <button type="submit">Submit</button>
        </div>
    </div>
</form>

这是我的第一次尝试： 这也是我的第二次尝试：

---

所以我希望每个

包装器
div都有一个步骤，标签作为步骤的标题，但我无法让它工作
 您需要操纵DOM和用JS生成的元素，以给他提供正确的结构

// Insert new div contains your steps    
$('<div id="steps"></div>').insertBefore('.submit');

// Loop each step
$('.wrapper').each(function(){
    // Add to steps container, the title
    $('#steps').append('<div class="title">' + $(this).find('label').text() + '</div>');
    // Add to steps container, the content
    $('#steps').append('<div class="content">' + $(this).find('.some-other-class').html() + '</div>');
    // Remove useless code
    $(this).remove();

});

// Now, you have the right structure, you can fire your lib script
$("#steps").steps({
    headerTag: ".title",
    bodyTag: ".content",
    transitionEffect: "slideLeft",
    autoFocus: true
});

//插入新div包含您的步骤
$（''）.insertBefore（'.submit'）；
//循环每一步
$（'.wrapper'）。每个（函数（）{
//将标题添加到步骤容器中
$（'#步骤'）.append（'+$（this.find（'label'）.text（）+''）；
//将内容添加到步骤容器中
$（'#steps'）.append（'+$（this.find（'.someother class'）.html（）+''）；
//删除无用代码
$（this.remove（）；
});
//现在，您有了正确的结构，可以启动lib脚本了
$（“#步数”）。步数({
标题：“标题”，
bodyTag:“.content”，
过渡效果：“slideLeft”，
自动对焦：正确
});

// Insert new div contains your steps    
$('<div id="steps"></div>').insertBefore('.submit');

// Loop each step
$('.wrapper').each(function(){
    // Add to steps container, the title
    $('#steps').append('<div class="title">' + $(this).find('label').text() + '</div>');
    // Add to steps container, the content
    $('#steps').append('<div class="content">' + $(this).find('.some-other-class').html() + '</div>');
    // Remove useless code
    $(this).remove();

});

// Now, you have the right structure, you can fire your lib script
$("#steps").steps({
    headerTag: ".title",
    bodyTag: ".content",
    transitionEffect: "slideLeft",
    autoFocus: true
});