使用 Django Models 通过 jQuery 分配 HTML div

Question

在过去的几天里，我一直在尝试使用 django 模型在 jquery 中创建一个方法，但我发现自己已经超出了我的深度，我会很感激并得到解释。所以目前我有一个 django 模型，它具有以下信息：名称、日期、位置、学期。我使用前 3 条信息来显示我的 html，但是，我想使用“学期”来查看我的项目进入的 div 标签。

学期标签可以返回“秋季”或“春季”值，有没有一种方法可以使用它来将组件分配给正确的 div。因此，如果学期是秋季，那么它应该进入 id 为“fall-races”的 div，如果是春季，它应该进入“spring-races”

目前我只有一个 jquery 可以在其中获取所有元素并将其分配给另一个 div。

感谢您的帮助和任何可能的建议。

<div class="flex-column">
        <div class="header shadow-lg">
            <h1 class="text-center py-3">
                Fall Schedule
            </h1>
        </div>
        <div id="fall-races">
            {% for race in race %}
                <div class="regatta-card my-2 mx-2 ">
                    <h2 class="center-text py-2">{{ race.date }}</h2>
                    <h1 class="text-center my-2">{{ race.name }}</h1>
                    <h3 class="text-center mb-3">{{ race.location}}</h3>
                    <h6 class="text-center"><a href="#">Recap</a></h6>
                </div>
            {% endfor %}
        </div>

        <input type="button" onclick="findChildren()" value="Click it" />

        <div class="header shadow-lg">
            <h1 class="text-center py-3">
                Spring Schedule
            </h1>
        </div>
        <div id="spring-races">

        </div>

    </div>

    <script>
        function findChildren() {
            var objChl  = document.getElementById('fall-races').children;
            var msg = document.getElementById('spring-races');
            msg.innerHTML = '';

            for (i = 0; i < objChl.length ; i++) {
                msg.appendChild(objChl[i]);
            }
        }
    </script>

Answer 1

也许你想要这样的东西：

HTML：

<!-- Some html stuff -->
<div id="fall-races">
        {% for race in race %}
            <div class="regatta-card my-2 mx-2 ">
                <h2 class="center-text py-2">{{ race.date }}</h2>
                <h1 class="text-center my-2">{{ race.name }}</h1>
                <h3 class="text-center mb-3">{{ race.location}}</h3>
                <h6 class="text-center"><a href="#">Recap</a></h6>
                <input type="hidden" value="{{race.semester}}" />
            </div>
        {% endfor %}
    </div>
    <!-- Some html stuff -->

JS：

    <script>
    function findChildren() {
        var parent = document.getElementById('fall-races');
        var objChl  = parent.children;
        var msg = document.getElementById('spring-races');
        msg.innerHTML = '';

        for (i = 0; i < objChl.length ; i++) {
            const element = objChl[i];
            var value = element.getElementsByTagName("input")[0].value;
            if (value==="Spring"){
              msg.appendChild(element);
              parent.removeChild(element);
             }

        }
    }
    </script>

这是实现这一目标的最简单方法，希望对您有所帮助。