如何使用 Django 在 HTML 中显示多个对象的列表，一个在另一个之下？
Posted
技术标签:
【中文标题】如何使用 Django 在 HTML 中显示多个对象的列表，一个在另一个之下？【英文标题】：How do I displaying a list of multiple objects, one below the other, in HTML using Django? 【发布时间】：2011-11-16 20:18:57 【问题描述】：我对 html 和 CSS 很陌生，所以这可能是一个非常基本的问题：
假设我有一个展示书籍的页面（包含与书籍相关的所有信息，例如图片、名称、isbn）。有时我会有 1 本书，有时我会有 3 或 6 本书，以此类推。
我知道如何使用 CSS 和 HTML 显示一本书，但是如何显示和定位多本书？我希望第一本书出现在页面顶部，后续书籍出现在其下方 - 我该如何实现？
信息来自数据库，并通过 Django 模板在 HTML 页面上 - 所以我有像 author|safe 这样的模板标签，其中包含每个（在这种情况下）作者的姓名。
这是我在 Django 模板中的代码：
<html>
<head>
<body>
<h1>Testing the class page backend</h1>
<ul>
% for edition in editions %
<li> edition|safe </li>
% endfor %
% for image in images %
<li> image|safe </li>
% endfor %
% for author in authors %
<li> author|safe </li>
% endfor %
% for book_title in book_titles %
<li> book_title|safe </li>
% endfor %
</ul>
</body>
</html>
【问题讨论】：
errr，只是重复代码？我们可以看一个例子吗，也许在jsfiddle 您如何在页面中显示您的图书？一些脚本或 php 或该书单来自哪里？ 如果将每本书包含在像 这样的块元素中，它们将自动位于彼此之下。如果这是你的要求 重复代码的问题是我不知道要显示多少本书-我知道我需要一个 for 循环并且我知道如何显示一本书，我'想以相同的格式显示我传递信息的所有书籍，但位置不同 @praks5432 我注意到现在包含了“django”标签。这是您使用的技术吗？ 【参考方案1】：我对你的 Django 模板代码有点困惑。你说你可以在页面上显示任意数量的书籍。您将什么上下文传递给您的 Django 模板？
从您的模板代码来看，您似乎对每个属性都有单独的列表 - 一个列表包含所有书籍的所有图像，一个列表包含所有作者，等等。
我认为拥有一个书籍对象列表会更有意义，其中每本书都有其属性，你知道的，属性。例如
<ul>% for book in books %
<li>
<h2> book.title|safe </h2>
<p>by book.author|safe </p>
<p> book.image </p>
<h3>Editions</h3>
<ul>% for edition in book.editions %
<li> edition|safe </li>
</ul>
</li>% endfor %
</ul>
当然，这可能对您的后端没有意义，但目前我还不能完全了解您的问题到底是什么。
编辑：
我想我现在了解您的上下文了。这真的不是 HTML 问题，而是 Django 模板问题。因为您的书籍的每个属性都有单独的列表（而不是书籍对象的列表），所以您需要遍历这些索引。因为the Django template language doesn’t have a built-in equivalent of Python’s range function，您必须使用自定义模板标签，或者将索引列表弹出到您的上下文中（例如context['indexes'] = len(context['editions'])）。
但我会认为将书籍对象列表传递给您的模板会更像 Django-y，就像我上面建议的那样。
【讨论】：
我的问题是在 html 中使用 css 显示该信息？假设我在 html 中有一个“对象”，我知道如何格式化和显示，我想以相同的格式显示该对象的多个实例，但不同的内容 - css 取决于我设置的选择器被格式化-但我不知道如何在不同的位置重复这些选择器 @praks5432：我不太明白你在说什么。拥有具有不同内容的 HTML 结构的多个实例的方法是从字面上拥有它的多个实例。假设您有三个书名，并且您希望它们每个都显示在<div> 中。您的 Django 模板代码应生成以下文本：<div>Book Title 1</div><div>Book Title 2</div><div>Book Title 2</div>。这与 CSS 无关。
感谢保罗！我实际上认为这种组织方式更好 - 所以我将尝试重写它然后显示它 - 在你的例子中，你有 html 标签与 for 循环重复 - 我不知道我能做到这一点- 所以谢谢！
@praks5432：不客气！是的 - 我对与此相关的另一个答案发表了评论，但 Django 模板语言 % for % 循环为传递给它的每个项目输出其 HTML 内容一次。如您所见，这实际上是一个 Django 模板问题，而不是 HTML 问题。
对不起-我应该更清楚-我想要多个实例，但是通过for循环生成它们-我不知道您可以使用for循环重复html标签
【参考方案2】：
这些书是从哪里来的？你有一个数据库或类似的东西来填充你的页面吗？无论如何，您可能需要编写一个遍历书籍数组的循环并输出诸如 HTML 有序或无序（或）列表之类的内容。但由于您对 HTML 和 CSS 非常陌生，我真的不知道这是否能回答您的问题。
【讨论】：
【参考方案3】：我正在尝试为每本书显示相同的格式，除了在 不同的位置，不同的内容
然后只需为某些元素（如 DIV）创建 css 类并将每本书放到<div class="yourClass"></div>
在jsp中我这样做：
<c:forEach var="catEntry" items="$arrayOfProducts" varStatus="status">
<div class="product">product content</div>
</c:foreach>
【讨论】：
好的，但是如何让每本新书都显示在前一本书的下方？ 另外，这不涉及我对 div class= "yourClass" 的硬编码吗？我不知道我要展示多少本书 使用 标签UL。您也可以使用 css 设置样式（例如删除行首的点）。 如果您不知道有多少本书，您如何将它们实际添加到站点？了解这一点至关重要 @praks5432：“如果我在 for lop 中放入 div 标签，它们会重复吗？”。如果你有一个 Django% for % 循环，那么是的，它里面的所有 HTML 都会为传递给 for 循环的每个项目重复。 Django 模板语言在服务器上进行解析，使用视图函数发送给它的 Django 上下文中的数据填充，并生成 HTML 作为其输出。以上是关于如何使用 Django 在 HTML 中显示多个对象的列表，一个在另一个之下？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用显示多个对象项的视图并在从 Django 数据库中删除其中一项后显示 html？
如何在 django admin 中显示多个模型的更改列表？
在Django模板中使用for循环显示多个chart.js图表
在多个 django 模板文件中显示相同 html 块的最佳 DRY 方法