javascript - 使用 Django Models 通过 jQuery 分配 HTML div
问题描述
在过去的几天里,我一直在尝试使用 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>
解决方案
也许你想要这样的东西:
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>
这是实现这一目标的最简单方法,希望对您有所帮助。
推荐阅读
- reactjs - 如何从当前路由中删除查询参数?
- node.js - jhipster/spring boot - 尝试代理请求时发生错误
- android - 在 Kindle 上使用 AppAuth 登录 Google
- vba - 如何在 VBA 中实现工厂项目模式?
- vba - 调试访问 VBA Currentdb.Execute
- time-series - 在模型平均预测中组合多个预测区间
- regex - REGEX 在引号之间但在指定字符串之后提取字符串
- javascript - 解析错误:保留关键字'yield'
- php - 初学者:cakephp 3.6 安装 cakedc/users
- google-maps - 如何删除 Google 地图上的两个版权声明之一?