1

我会尽力非常清楚地解释我的问题，我一直在使用 ajax 并且我在while使用 jquery 在循环内附加数据时遇到了一些麻烦。

这是我的循环，显示帖子的标题并检查标题是否有任何评论。如果不是，它将不显示任何评论

<ul class="title">
<?php $result = getTitles();
      while ($row = $result->fetch_assoc()) { ?>
      <li> <?php echo $row['title']; ?>  </li>
        <ul class="comments">
           <?php $comments = getComments();
                while (...) { ?>
           <li> <?php //get comments associated to the title posts ?>
           <?php } ?>
        <input box>
        </ul>
<?php  } ?>
</ul>

所以它显示如下

title 1
  |- comment 1
  |- comment 2
  |- <input> box

title 2
  |- comment 1
  |- <input> box

title 3
  |- <b>no comment </b>
  |- <input> box

然后我有这个 jQuery 从 a 中获取值<textarea id="title">并将结果附加到<ul class="title">

/* AJAX - submit status */
$(function() {
    $(document).on('click','.submit', function () {
        var title= $('#title').val().trim();
        if (title.length == 0 ) { //some code } 

        $.post('insert_post.php', {title: title});
        $("<li>" + title + "</li>").prependTo('.title');

    });
});

目前，当我附加数据时，它只是发布title而不在我的内部运行它while循环中运行它。

我希望它发生的方式是，在循环内运行附加数据，因此在显示时，它将包含与我的关联的所有必要元素while循环相关的所有必要元素

其中一个元素是<input>盒子，每个标题都有自己的<input>盒子。在通过 jQuery 附加数据的情况下，它只发布title而不是每个必须包含的元素title

4

1 回答 1

1

您的 HTML 无效 — 元素的唯一有效子<ul>元素是<li>，而不是其他元素。重新格式化您的 HTML，如下所示：

<ul class="title">
<?php $result = getTitles();
    while ($row = $result->fetch_assoc()) { ?>
    <li title="<?php echo $row['title']; ?>">
        <?php echo $row['title']; ?>
        <ul class="comments">
        <?php $comments = getComments();
            while (...) { ?>
            <li> <?php //get comments associated to the title posts ?>
        <?php } ?>
            <li>
                <form>
                    <textarea></textarea>
                    <input type="submit" />
                </form>
            </li>
        </ul>
    </li>
<?php  } ?>
</ul>

您的 DOM 将如下所示：

  • 标题 1
    • 评论 1
    • 评论 2
    • 输入
  • 标题 2
    • 评论 1
    • 输入

为了title在您进行 AJAX 调用时获取，只需获取元素title父级的属性：<ul class="comments">

$(function() {
    $(document).on('click','.submit', function () {
    // Alternate:
    // $(document).on('submit', '.comments form', function() {
        // Travel up DOM tree to get the title, from the <li> element with the title attribute specified
        var title = $(this).parents("li[title]").attr("title");

        // Do rest of the AJAX call
    });
});

附在此处的是一个准系统 JSFiddle 演示，您可以向上移动 DOM 树以搜索正确的标题：http: //jsfiddle.net/teddyrised/jyMYY/

于 2013-10-16T15:37:52.533 回答