在过去的几天里，我一直在尝试使用 django 模型在 jquery 中创建一个方法，但我发现自己已经超出了我的深度，希望得到我能得到的解释。所以目前我有一个 django 模型，它包含以下信息：姓名、日期、地点、学期。我使用前 3 条信息来显示我的 html，但是，我想使用“学期”来查看我的项目进入的 div 标签。
学期标签可以返回 'Fall' 或 'Spring' 值，我可以使用它来将组件分配给正确的 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>
也许你想要这样的东西：
网址：
<!-- 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>
这是实现这一目标的最简单方法，希望对您有所帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句