Question

我试图输出帖子和评论reddit样式。这是预期的result（模型HMTL），但目前看起来像this。

这是我正在使用的代码，用于输出帖子和评论：

<?php if(!empty(getMessage())): ?>
  <div class="container">
      <h1>The nested comment exampel!</h1>
  <?php   
      $i=0; //initialize flag
      foreach (getMessage() as $value){ ?>
      <div class="comment" id="<?= $value->id; ?>">
       //you don't need level class
          <?php if($value->visible == 0) : ?>
          <?= $value->date ?><br>
          Deleted
          <?php elseif($value->visible == 1): ?>
          <?= $value->date ?> <a href="index.php?delete=<?= $value->id ?>">X</a> <?= 'id: '. $value->id . ', sort order: ' .$value->sort_order . ', level: '.$value->level ;?><br>
          <?= $value->comment_text ?>

          <form action="index.php" method="post">
          <input type="hidden" name="id" value="<?= $value->id ?>" />
          <input type="hidden" name="parent" value="<?= $value->reply_to ?>" />
          Add comment: <input type="text" name="svar">
          <input type="submit">
          </form>

          <?php endif; ?>

<?php 
        $i++; //sum flag

    }
    for($x=0; $x<=$i; $x++) { //paint div closers
           echo '</div>' ;
   }  
 ?>
<? endif; ?>
      </div>

如果我将foreach语句更改为

，该怎么办？

<?php if(!empty(getMessage())): ?>
  <div class="container">
      <h1>The nested comment exampel!</h1>
  <?php    foreach (getMessage() as $value){ ?>
      <div class="level_<?= $value->level; ?> comment" id="<?= $value->id; ?>">
          <?php if($value->visible == 0) : ?>
          <?= $value->date ?><br>
          Deleted
          <?php elseif($value->visible == 1): ?>
          <?= $value->date ?> <a href="index.php?delete=<?= $value->id ?>">X</a> <?= 'id: '. $value->id . ', sort order: ' .$value->sort_order . ', level: '.$value->level ;?><br>
          <?= $value->comment_text ?>

          <form action="index.php" method="post">
          <input type="hidden" name="id" value="<?= $value->id ?>" />
          <input type="hidden" name="parent" value="<?= $value->reply_to ?>" />
          Add comment: <input type="text" name="svar">
          <input type="submit">
          </form>

          <?php endif; ?>
        </div>
<?php } endif; ?>
      </div>

输出一切“平坦”。根据类，使用jQuery将其移动到“右”div。

因此，如果<div class="level_0 comment" id="1">是父div（level_0），则级别为1 <div class="level_1 comment" id="3">的div应位于父div中。并且<div class="level_2 comment" id="14">级别2应该在子级别1中，级别1.这个fiddle希望能够更好地理解：这个注释树可以包含许多相同级别的类，所以我们如何知道它在右边div里面移动？由于SELECT * FROM tree ORDER BY reply_to ASC, sort_order ASC，每个评论都已获取已排序。所以这不会是一个问题，孩子应该被“一个”分开。

以下是一些sample data。

这是我用来检索数据的功能：

function getMessage(){
$app = new Connection();

    $sql = 'SELECT *
    FROM tree ORDER BY reply_to ASC, sort_order ASC';
$query = $app->getConnection()->prepare($sql);
$query->execute();

    return $query->fetchAll();
}

如何使用jQuery输出数据reddit样式。

Answer 1

当然这是一个CSS修复？

输出列表中的所有注释，并根据级别类填充每个注释。

.level_0 {    margin-left:  0px;    }
.level_1 {    margin-left: 10px;    }
.level_2 {    margin-left: 20px;    }

etc..

将子div移动到父div

1 个答案: