Как управлять размером div путем добавления класса с помощью jquery?

Простите, если вопрос недостаточно ясен, но позвольте мне объяснить, что со мной произошло.

сейчас у меня есть 5 графиков, которые были созданы Pandas и я хочу использовать jquery для воздействия на систему grid в bootstrap. все div'ы имеют следующий класс "col-md-6", кроме последнего дочернего, который имеет "col-md-12", что я хотел бы сделать: добавить "col-md-6" к последнему дочернему в случае, если длина графиков четное число и удалить "col-md-12" из последнего.

Фактически, этот процесс работает, и класс добавляется к последнему дочернему элементу после того, как документ готов, однако, последняя графа применяет "col-md-12" и не применяет "col-md-6", хотя у нее есть "col-md-6", но когда я делаю изменение размера страницы, графа начинает применять "col-md-6" на ней.

Вопрос в том, как я могу применить "col-md-6" динамически без изменения размера страницы?

Вы можете увидеть поведение до и после изменения размера, чтобы понять, что я имею в виду: -

перед тем, как изменить размер before do resize

после выполнения изменения размера after doing a resize

Код выглядит следующим образом:-

        ...
        <div class="col-md-6 error-graph">
            {% if regular_group %}
            <div style="">
                <div style="max-width: 100%;max-height: 100%">
                    {{ regular_group|safe }}
                </div>
            </div>
            {% endif %}
        </div>

        <div class="col-md-12 error-graph">
            {% if complex_group %}
            <div style="">
                <div style="max-width: 100%;max-height: 100%">
                    {{ complex_group|safe }}
                </div>
            </div>
            {% endif %}
        </div>

<script>

    function add_class(last_child) {
        let error_graph = $(".error-graph");
        if (error_graph.length % 2 === 0) {
            last_child.removeClass("col-md-12").addClass("col-md-6");
        }
        return last_child;
    }

    function resize_graph() {
        {#$(add_class).width($(this).css("width"));#}
        let func = add_class($(".error-graph:last-child"));
        console.log(func);
        {#$(document).load(func.setWidth = 10);#}
    }

    $(document).ready(function () {
         resize_graph();
    });
</script>
Вернуться на верх