javascript - 将子 div 移动到父 div 中

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 <div class="level_1 comment" id="3">应该在父 div 内。和<div class="level_2 comment" id="14">级别 2 应该位于子 div 级别 1 内。此 fiddle希望可以更好地理解:这个注释树可以包含许多相同级别的类，那么我们如何知道它是在右 div 内移动的呢？由于SELECT * FROM tree ORDER BY reply_to ASC, sort_order ASC ，每条评论都已排序。所以这不会有问题， child 应该向上移动“一个”div。

这里有一些 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..