JQuery Steps Wrapper

Question

Я использую библиотеку jQuery Steps , но моя структура формы сгенерирована, и я не могу ее изменить. У меня есть структура, подобная этой:

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

проблема в том, что jQuery Steps не работает с обертками для заголовка и содержимого

$("#form").steps({
    headerTag: ".wrapper label",
    bodyTag: ".wrapper .some-other-class",
    transitionEffect: "slideLeft",
    autoFocus: true
});

вот моя первая попытка: fiddle, а также вот моя вторая попытка: fiddle

Поэтому я хочу сделать шаг для каждого wrapper div с меткой в ​​качестве заголовка шага, но я не могу его получитьработай.

Answer 1

вам нужно манипулировать 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
});