织梦输出信息每三条一个div,如何实现?

99ANYc3cd6
预计阅读时长 12 分钟
位置: 首页 织梦建站 正文
  1. 推荐方案:使用 for 循环,代码更清晰、灵活,适合大多数情况。
  2. 备选方案:使用 while 循环,代码更简洁,但灵活性稍差。

使用 for 循环 (推荐)

这种方法的核心思想是:用一个变量 i 作为计数器,在循环的每一步判断 i % 3 的结果,如果余数为0,说明当前是第3、第6、第9...条数据,就应该开启一个新的div

织梦输出信息每三条 一个div
(图片来源网络,侵删)

示例代码:

假设我们要在首页调用文章列表,每3篇文章用一个div包裹。

{dede:arclist typeid='0' row='9'}
  <?php
  // 初始化计数器
  $i = 1;
  ?>
  <?php if ($i % 3 == 1): ?>
    <div class="article-row">
  <?php endif; ?>
    <div class="article-item">
      <a href="[field:arcurl/]">[field:title/]</a>
      <p>[field:description function='cn_substr(@me,100)'/]...</p>
    </div>
  <?php if ($i % 3 == 0 || $i == @me['row']): ?>
    </div>
  <?php endif; ?>
  <?php $i++; ?>
{/dede:arclist}

代码解析:

  1. {dede:arclist ...}: 这是织梦的文章列表标签。
  2. <?php $i = 1; ?>: 在循环开始前,定义一个计数器变量 $i 并初始化为1。
  3. <?php if ($i % 3 == 1): ?>: 这是开启新 div 的判断条件
    • $i % 3 是计算 $i 除以3的余数。
    • 当余数为1时(即第1、4、7...条数据),执行 <div class="article-row">,这样,每3个article-item的开始,都会有一个新的article-row来包裹它们。
  4. <div class="article-item">...</div>: 这是每一条信息的正常输出结构。
  5. <?php if ($i % 3 == 0 || $i == @me['row']): ?>: 这是关闭 div 的判断条件
    • $i % 3 == 0: 当余数为0时(即第3、6、9...条数据),执行 </div>
    • || $i == @me['row']: 这是一个重要的补充,用于处理最后不足3条数据的情况,如果总共是7条数据,第7条数据时,$i % 3 等于1,不会触发关闭,但 $i == @me['row'] (7 == 7) 会为真,从而确保最后一个 div 正确关闭。
  6. <?php $i++; ?>: 在每次循环结束时,将计数器 $i 的值加1。

最终生成的HTML结构会是这样的:

织梦输出信息每三条 一个div
(图片来源网络,侵删)
<div class="article-row">
  <div class="article-item">...</div>
  <div class="article-item">...</div>
  <div class="article-item">...</div>
</div>
<div class="article-row">
  <div class="article-item">...</div>
  <div class="article-item">...</div>
  <div class="article-item">...</div>
</div>
<div class="article-row">
  <div class="article-item">...</div>
  <div class="article-item">...</div>
</div>

使用 while 循环

这种方法利用了织梦标签的 total 属性,可以更简洁地实现,但不如 for 循环直观。

示例代码:

{dede:arclist typeid='0' row='9' total='@me'}
  <div class="article-row">
    {dede:loop}
      <div class="article-item">
        <a href="[field:arcurl/]">[field:title/]</a>
        <p>[field:description function='cn_substr(@me,100)'/]...</p>
      </div>
    {/dede:loop}
  </div>
{/dede:arclist}

代码解析:

  1. {dede:arclist ... total='@me'}: total='@me' 是关键,它将外层循环的总数传递给了内层。
  2. <div class="article-row">: 在 while 循环开始时就开启一个 div
  3. {dede:loop}: 这是一个标准的循环标签,默认循环3次。
  4. </div class="article-row">: 在 while 循环结束后关闭这个 div

注意:这种方法虽然代码少,但缺点是灵活性差,如果你想动态改变每行的数量(比如根据某个条件变成每行4个),用 for 循环只需要修改 $i % 3 中的数字即可,而 while 循环则需要重写结构。


总结与建议

特性 方案一 (for 循环) 方案二 (while 循环)
代码清晰度 高,逻辑清晰,易于理解和修改。 较低,嵌套结构可能让新手困惑。
灵活性 极高,可以轻松修改为每行4、5条,或加入更复杂的判断逻辑。 较低,每行数量固定为3,修改结构较麻烦。
适用场景 强烈推荐,适用于所有需要分组的列表,尤其是可能需要后期修改的场景。 适用于简单、固定需求,且追求代码简洁的场景。

最终建议:

为了代码的健壮性和未来的可维护性,强烈推荐您使用方案一(for 循环),它虽然代码量稍多,但逻辑清晰,是处理这类问题的标准做法。

-- 展开阅读全文 --
头像
dede文章图片大小如何控制?
« 上一篇 2025-12-14
dede织梦后台文章内容不显示空白怎么办?
下一篇 » 2025-12-14

相关文章

取消
微信二维码
支付宝二维码

目录[+]