Question

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

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

<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从<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必须包含的元素

Answer 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
- 输入

为了在进行AJAX调用时获取title，只需获取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/

如何在PHP while循环中通过jQuery运行附加数据？

1 个答案: