添加<br>在 HTML 的帮助下 JavaScript

Question

我试图在我的每个未隐藏的表单字段之后添加两个“br”，否则它会在我的表单中使用一些空间并且看起来不太好。 但由于某种原因，它没有出现。

<legend>Ética y Cumplimiento:</legend>
        <fieldset style="border: 1px solid #000;">
            <br>
            <div id="formulario3">
                {% for field in form3 %}
                    {% if field.flags.required %}
                        {{ field.label(text='*' + field.label.text) }}
                    {% else %}
                        {{ field.label }}
                    {% endif %}

                    {% if field.errors %}
                        {{ field(class="is-invalid") }}
                        <div class="invalid-feedback">
                            {% for error in field.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ field(class="form-control") }}
                    {% endif %}

                    <script>
                        let elementoseleccionado = document.getElementById({{ field.id }});
                        if ((document.getElementById('{{ field.id }}')).type === 'hidden') {
                            $('label[for="{{ field.id }}"]').css('display', 'none');
                        }
                        else{
                            let linebreak = document.createElement("br");
                            elementoseleccionado.appendChild(linebreak);
                            elementoseleccionado.appendChild(linebreak);
                        }
                    </script>

                {% endfor %}

                <input type="button" class="btn btn-primary" id="morecumplimiento" value="Más">

                <br>
                <br>

            </div>

我的代码生成的错误是这个：

生成的 HTML 是这个：

            <legend>Ética y Cumplimiento:</legend>
        <fieldset style="border: 1px solid #000;">
            <br>
            <div id="formulario3">
                
                    
                        <label for="exposicion_politica">* Indique si alguna persona mencionada en el presente formulario es/fue una Persona Expuesta Políticamente (PEP)</label>
                    

                    
                        <select class="form-control" id="exposicion_politica" name="exposicion_politica" required><option value="0">---</option><option value="SI">SI</option><option value="NO">NO</option></select>
                    

                    <script>
                        if ((document.getElementById('exposicion_politica')).type === 'hidden') {
                            $('label[for="exposicion_politica"]').css('display', 'none');
                        }
                        else{
                            let linebreak = document.createElement("br");
                            if ((document.getElementById('exposicion_politica')) !== null && (document.getElementById('exposicion_politica')).value === ''){
                                document.getElementById(exposicion_politica).appendChild(linebreak);
                                document.getElementById(exposicion_politica).appendChild(linebreak);
                            }

                        }
                    </script>

                
                    
                        <label for="ap_nom_etica1">*Apellidos y Nombres 1</label>
                    

                    
                        <input class="form-control" id="ap_nom_etica1" name="ap_nom_etica1" required type="text" value="">
                    

                    <script>
                        if ((document.getElementById('ap_nom_etica1')).type === 'hidden') {
                            $('label[for="ap_nom_etica1"]').css('display', 'none');
                        }
                        else{
                            let linebreak = document.createElement("br");
                            if ((document.getElementById('ap_nom_etica1')) !== null && (document.getElementById('ap_nom_etica1')).value === ''){
                                document.getElementById(ap_nom_etica1).appendChild(linebreak);
                                document.getElementById(ap_nom_etica1).appendChild(linebreak);
                            }

                        }
                    </script>

如您所见，没有生成 br 并且出现了一些错误。

Answer 1

您可以使用each循环来遍历您的输入并检查它是否可见，如果是，则使用.after添加<br>标签

演示代码：

 $("select, input").each(function() { //check if visible if ($(this).is(":visible")) { //add br after that elements $(this).after("<br/><br/>") } else { //hide label $(this).prev().css('display', 'none'); } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <legend>Ética y Cumplimiento:</legend> <fieldset style="border: 1px solid #000;"> <br> <div id="formulario3"> <label for="exposicion_politica">* Indique si alguna persona mencionada en el presente formulario es/fue una Persona Expuesta Políticamente (PEP)</label> <select class="form-control" id="exposicion_politica" name="exposicion_politica" required> <option value="0">---</option> <option value="SI">SI</option> <option value="NO">NO</option> </select> <label for="ap_nom_etica1">*Apellidos y Nombres 1</label> <input class="form-control" id="ap_nom_etica1" name="ap_nom_etica1" required type="text" value=""> <label for="">*Apellidos y Nom</label> <input class="form-control" name="ap_nom_etica1" required type="hidden" value=""> <label for="">*Apellidos y Nom</label> <input class="form-control" name="ap_nom_etica1" required type="text" value=""> </div> </fieldset>

其他方法是直接 select 输入和 select 并添加 br 标签而不是使用每个循环。

演示代码：

 $("input:visible,select:visible").after("<br/><br/>") $("input:hidden,select:hidden").prev().css('display', 'none');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <legend>Ética y Cumplimiento:</legend> <fieldset style="border: 1px solid #000;"> <br> <div id="formulario3"> <label for="exposicion_politica">* Indique si alguna persona mencionada en el presente formulario es/fue una Persona Expuesta Políticamente (PEP)</label> <select class="form-control" id="exposicion_politica" name="exposicion_politica" required> <option value="0">---</option> <option value="SI">SI</option> <option value="NO">NO</option> </select> <label for="ap_nom_etica1">*Apellidos y Nombres 1</label> <input class="form-control" id="ap_nom_etica1" name="ap_nom_etica1" required type="text" value=""> <label for="">*Apellidos y Nom</label> <input class="form-control" name="ap_nom_etica1" required type="hidden" value=""> <label for="">*Apellidos y Nom</label> <input class="form-control" name="ap_nom_etica1" required type="text" value=""> </div> </fieldset>