javascript - 如何为父 div 及其隐藏的子 div 应用样式？

Question

该应用程序更多的是带有 div 操作的单页导航。根据上一个/下一个按钮，它将相应地显示该部分。现在，我必须为填写的表单数据生成预览页面。我的想法是克隆所有 div 并将输入字段替换为只读。这是我已经克隆的 div 结构。

寻找解决方案:启用每个div样式显示为“inline-block”

尝试过的代码:

function confirmationPage() {
        //1
        $(".pgePreview").closest('div').children().css('display', 'inline-block');
        //2
        $("#pgePreview div").each(function (e) {
            if (e != 0) {
                $(this).css('display', 'inline-block');
            }
        });
    }

感谢您的帮助。

Answer 1

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    $("#parent div").each(function (e) {
        if (e != 0) {
            $(this).css('display', 'inline-block');
        }
    });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div id="parent">
        <div>
            <div style="display:none; border: 1px solid; width:100px; height:100px"></div>
            <div style="display:none; border: 1px solid; width:100px; height:100px"></div>
            <div style="display:none; border: 1px solid; width:100px; height:100px"></div>
            <div style="display:none; border: 1px solid; width:100px; height:100px"></div>
            <div style="display:none; border: 1px solid; width:100px; height:100px"></div>
        </div>
    </div></code></pre>
</div>
</div>