代码之家 › 专栏 › 技术社区 › suchislife

循环浏览对象中的段落。怎么用?

object html jquery javascript

suchislife · 技术社区 · 6 年前

下面的javascript对象包含两个段落。我很难想出如何动态地输出它们。也许是一个循环?但是段落是具有自己子属性的子对象。我需要一行访问它们并将它们附加到 modal-section-body

请随时建议重新设计对象。

            // Sample Modal Object
            var modalDefaults = {

              // depth 0
              modalId: 'modal6',
              
              // depth 0
              modalHeader: {
                icon: 'headerIcon',
                iconColor: 'headerIconColor',
                mainTitle: 'headerTitle',
                subTitle: 'headerSubTitle'
              },

              // depth 0  
              modalBody: {
                title: 'bodyTitle',
                abrv: 'bodyAbrv',
                subTitle: 'bodySubTitle',

                //depth 1
                paragraph1: {
                  //depth 2
                  title: 'Paragraph 1 Title',
                  body: 'Lorem ipsum dolor sit amet 1.'
                },

                //depth 1
                paragraph2: {
                  //depth 2
                  title: 'Paragraph 2 Title',
                  body: 'Lorem ipsum dolor sit amet 2.'
                }

              },

              // depth 0
              modalFooter: {

                  //depth 1
                linkOk: {
                  //depth 2
                  color: 'linkOkColor',
                  icon: 'linkOkIcon',
                  label: 'linkOkLabel',
                  href: './'
                },

                //depth 1
                linkCancel: {
                  //depth 2
                  color: 'linkCancelColor',
                  icon: 'linkCancelIcon',
                  label: 'linkCancelLabel',
                  href: './'
                }
              }
            };




            console.log(modalDefaults.modalId);

            console.log(modalDefaults.modalHeader.icon);
            console.log(modalDefaults.modalHeader.iconColor);
            console.log(modalDefaults.modalHeader.mainTitle);
            console.log(modalDefaults.modalHeader.subTitle);

            console.log(modalDefaults.modalBody.title);
            console.log(modalDefaults.modalBody.abrv);
            console.log(modalDefaults.modalBody.subTitle);

            console.log(modalDefaults.modalBody.paragraph1.title);
            console.log(modalDefaults.modalBody.paragraph1.body);

            console.log(modalDefaults.modalBody.paragraph2.title);
            console.log(modalDefaults.modalBody.paragraph2.body);

            console.log(modalDefaults.modalFooter.linkOk.color);
            console.log(modalDefaults.modalFooter.linkOk.icon);
            console.log(modalDefaults.modalFooter.linkOk.label);

            console.log(modalDefaults.modalFooter.linkCancel.color);
            console.log(modalDefaults.modalFooter.linkCancel.icon);
            console.log(modalDefaults.modalFooter.linkCancel.label);

1 回复 | 直到 6 年前

Ali Soltani 6 年前

你可以这样做:

let modalBody = modalDefaults.modalBody;
for (let [key, value] of Object.entries(modalBody)) {
    if (/paragraph(\d)/.test(key)) {
        $('.row').append($(document.createElement('h1')).text(value.title));
        $('.row').append($(document.createElement('p')).text(value.body));
    }
}

Online demo (jsFiddle)