使用HTML集合進行復雜的動態部分分離

我正在使用 js 和 bootstrap 制作帶有分頁（多步驟表單）的注冊表單，其結構類似于 SNIPPET 1。

我使用下面的 JS 代碼在我的表單中添加了card、和card-header，并將結構更改為 SNIPPET 2。card-bodycard-footer

但是，我認為有更好的方法可以做到這一點，我希望能夠進行復雜的動態部分分離。所以我想弄清楚的是：

1. 對于卡片的每個部分（頁眉、正文、頁腳），都有form我想要從中分離的元素。但是我不想給出硬值來選擇所需的元素（form.children[1-5]等），而是希望能夠選擇陣列的一部分（從開始到元素 id="xxx" 或從 id="xxx" 到 id="zzz ”）。
2. 我嘗試使用slice()但它不起作用let form_header = form.slice(0,11);。它給出了以下錯誤：Uncaught TypeError: form.slice is not a function
3. 動態：將來我想將此程序用于另一種可能具有更多部分和輸入而不是具有相同結構的表單。

<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()它時，會出現 Node 錯誤

uj5u.com熱心網友回復：

您可以嘗試這種方法，我認為您可以對其進行修改以實作更復雜的目標

// 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：我猜您收到錯誤是因為您獲取的是表單項而不是欄位集項？

獎金，如果您想收集每個部分的所有輸入并創建另一個表單

let bootstrap_form = '<form><div >$1</div><div >$2</div><div >$3</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);

標籤：javascript html 数组 片 html集合

上一篇：基于陣列的ReactNative排序字典

下一篇：我不明白為什么這不起作用（在陣列/if陳述句中指定一個范圍）