Question

所以我在这里遇到了一个相当奇怪的问题。我的想法很简单。我有一个社交媒体网站，用户可以在其中发布帖子＆＃39;就像在facebook上一样。现在为了输出主页上的所有帖子，我创建了一个简单的php页面，它回显了JSON编码的数据。 Json Data看起来像这样：

{  "posts" : [
         {"post_id" : "1", "user_id" : "1", "post_text" : "Hello World 1"},
         {"post_id" : "2", "user_id" : "2", "post_text" : "Hello World 2"}
]

我创建了一个简单的html代码来输出我的JSON数据

<div class="clone_container">

        <div class="clone_div">
        <p class="post_text"></p>
        </div>

    </div>

<div class="clone_container"></div>将包含所有帖子，<div class="clone_div"></div>将是将使用JSON数据克隆的div。

为了使用JSON数据克隆<div class="clone_div"></div>，我创建了这个简单的Jquery代码：

$('document').ready(function(){
    $('#clone_btn').click(function(){
        $.ajax({
            type : 'GET',
            url : 'jsonPHP.php',
            dataType: 'json',
            success : function(data)
            {
                $.each(data.posts, function(i,data){
                    $('.clone_div').clone().attr('id', ('postId' + data.post_id))
                    .find('.post_text').html(data.post_text).appendTo('.clone_container');
                });
            }
        });
    });
});

现在使用上面的代码，我想克隆<div class="clone_div"></div>并通过给出唯一的post id的值为每个克隆的div添加一个id。另外，我想在每个＆＃39; <p class="post_text"></p>＆＃39;中输出帖子文字。标签。问题是，<div class="clone_div"></div>正在被克隆并附加到<p class="post_text"></p>，而不是克隆<div class="clone_container"></div>。这是我得到的输出：

<div class="clone_container">

    <div class="clone_div">
      <p class="post_text"></p>
    </div>

    <p class="post_text">Hello World 1</p>
    <p class="post_text">Hello World 2</p>

</div>

如何解决此问题？

Answer 1

这与您链接命令的方式有关：

见这一行：

.find('.post_text').html(data.post_text).appendTo('.clone_container');

.find('.post_text').html(data.post_text)正在返回您的<p class='post_text'>元素，然后您将其调用appendTo。您想要创建此链返回的对象的变量：$('.clone_div').clone().attr('id', ('postId' + data.post_id))并在上调用appendTo 。

Answer 2

使用find方法时，您正在从克隆的div切换到p-tag。要切换回div本身，您可以使用.end方法。 Docs

$('.clone_div:first') //clone only the first div
    .clone()
    .attr('id', ('postId' + data.post_id))
    .find('.post_text')
         .html(data.post_text)
    .end() //sic!
    .appendTo('.clone_container');

jquery clone（）使动态数据无法正常工作

2 个答案: