具有 HTML 个集合的复杂动态部分分离

Question

我正在使用 js 和 bootstrap 制作一个带有分页（多步骤表单）的注册表，其结构类似于 SNIPPET 1。

我使用下面的 JS 代码在我的表单中添加了 card、card-header、card-body 和 card-footer，并将结构更改为 SNIPPET 2。

但是，我认为有更好的方法可以做到这一点，我希望能够进行复杂的动态部分分离。所以我想弄清楚的是：

对于卡片的每个部分（页眉、正文、页脚），都有来自 form 的元素，我想将它们分开。但是，我不想给 select 所需的元素（form.children[1-5] 等）赋予硬值，而是希望能够 select 部分数组（从开始到元素 id="xxx " 或从 id="xxx" 到 id="zzz")。
我尝试使用 slice()，但它不起作用 let form_header = form.slice(0,11);。它给出以下错误：Uncaught TypeError: form.slice is not a function
动态：将来我想将此过程用于可能具有更多部分和输入而不是具有相同结构的另一种形式。

<form>
    <div id="notifications">
    <fieldset id="title">...
    <input>...
    <input>...
    <fieldset id="section1">...
    <script>...
    <input>...
    <input>...
    <fieldset id="section2">...
    <input>...
    <input>...
    <script>...
    <style>...
    <div>
        <button type="submit">...
    </div>
</form>

<div class="card">
    <form>
        <div id="notifications">
        
        <div class="card-header">
            <fieldset id="title">...
        </div>
        
        <div class="card-body">
            <input>...
            <input>...
            <fieldset id="section1">...
            <script>...
            <input>...
            <input>...
            <fieldset id="section2">...
            <input>...
            <input>...
        </div>
        
        <div class="card-footer">
            <script>...
            <style>...
            <div>
                <button type="submit">...
            </div>
        </div>
    </form>
</div>

let form = document.getElementById("geodirectory-add-post");
//HAS 10 ELEMENTS
let form_header = [form.children[0], form.children[1], form.children[2], form.children[3]];     
//HAS 70 ELEMENTS
let form_body = [form.children[50], form.children[51], form.children[52], form.children[53]];
//HAS 20 ELEMENTS
let form_footer = [form.children[56], form.children[57], form.children[58], form.children[59]];


var card = document.createElement("div");
card.className = "card";

//Crate Card Header
var card_header = document.createElement("h1");
card_header.className = "card-header";

//Create Card Body
var card_body = document.createElement("div");
card_body.className = "card-body";
card_body.style.maxHeight = "400px";
card_body.style.overflowY= "auto";

var card_footer = document.createElement("div");
card_footer.className = "card-footer text-muted";



for(var i=0; i<form_header.length; i++){
    card_header.appendChild(form_header[i]);
}
for(var i=0; i<form_body.length; i++){
    card_body.appendChild(form_body[i]);
}
for(var i=0; i<form_footer.length; i++){
    card_footer.appendChild(form_footer[i]);
}

// insert wrapper before el in the DOM tree
form.parentNode.insertBefore(card, form);

// move el into wrapper
card.appendChild(form);
form.prepend(card_header);
card_header.after(card_body);
card_body.after(card_footer);

我就是这样做的。但是，当我尝试使用 slide() 时，它给了我一个节点错误

Answer 1

你可以试试这个方法，我想你可以修改它来实现更复杂的东西

// helper function to wrap single element
var wrap = function(el, wrapper) {
    el.parentNode.insertBefore(wrapper, el);
    wrapper.appendChild(el);
}

// helper function to wrap multiple elements
var wrapAll = function(ary, wrapper) {
    if (ary && ary.length) {
        ary[0].parentNode.insertBefore(wrapper, ary[0]);
        for (var i in ary) {
            wrapper.appendChild(ary[i]);
        }
    }
}

// map sections
var sectionsMap = {
    'title': 'header',
    'section1': 'body',
    'section2': 'footer'
};
// array to store all newly created section: card-header, card-body, card-footer 
var sectionsArr = [];

// create the card main container
var card = document.createElement('div');
card.className = 'card';

// loop mapped stuff
for (const prop in sectionsMap) {
    if (sectionsMap.hasOwnProperty(prop)) {

        // create each section card-header, card-body, card-footer 
        let new_section = document.createElement('div');
        new_section.className = 'card-' + sectionsMap[prop];
      
        // add section to array
        sectionsArr.push(new_section);

        let old_section = document.querySelector('#' + prop);

        wrap(old_section, new_section);
    }
}

// wrap all new section with the main card element
wrapAll(sectionsArr, card);

PS：我猜你收到了一个错误，因为你得到的是表单 chields 而不是 fieldset chields？

奖金，如果你想收集每个部分的所有输入并创建另一个表格

let bootstrap_form = '<form><div class="card-header"></div><div class="card-body"></div><div class="card-footer"></div></form>';
let sections = [];

let fieldsets = document.querySelectorAll("#geodirectory-add-post > fieldset");
fieldsets.forEach((fieldset, fIndex) => {
    sections[fIndex] = [];
    let inputs = fieldset.querySelectorAll("input");
    inputs.forEach((input, iIndex) => {
        sections[fIndex].push(input.outerHTML);
    });
});

bootstrap_form = bootstrap_form
    .replace(/$1/g, sections[0].join("\n")) // header
    .replace(/$2/g, sections[1].join("\n")) // body
    .replace(/$3/g, sections[2].join("\n")); // footer

console.log(bootstrap_form);

具有 HTML 个集合的复杂动态部分分离

Complex dynamic Section Separation with HTML collections

html

javascript

arrays

slice

htmlcollection