Php 使用Ajax加载的内容将丢失样式

我创建了一个加载10个元素的页面，在页面底部我放置了经典按钮“加载更多”来加载10个元素

问题在于jQuery：nth-child（）属性给出的样式不适用于接下来的10个元素，以此类推

有解决这个问题的办法吗

例如：

文件main.js

$("#main_content > p:nth-child(3n+2)").addClass("small-product-wrapper");
$("#main_content > p:nth-child(3n+3)").addClass("small-product-wrapper");

文件example.php

<script type="text/javascript">
  $('#more_button').click(function(){

    loaded_messages += 10;

    $('#loading').ajaxSend(function() {
      $("#loading").stop(true,true).fadeIn().delay(200).fadeOut();
    });

    var dati = "twitterpagination/get_messages/" + loaded_messages;
    $.ajax({
      url:'twitterpagination/get_messages/' + loaded_messages,
      type: 'get',
      data: dati,
      cache: false,
      success: function() {
    $.get(dati, function(data){
      $("#main_content").append(data);
    });

    if(loaded_messages >= num_messages - 10) {
      $("#more_button").hide();
    }
      },
      error: function() {
    // do nothing 
      }
    });
    return false;
  });
</script>

<div id="main">
  <?php
  foreach($latest_messages as $message) {
    echo '<p>'.$message->message .'</p>';
  }
  ?>
  <div id="more_button">more</div>
</div>

$（“#更多按钮”）。单击（函数（）{
加载的_消息+=10；
$（'#加载'）.ajaxSend（函数（）{
$（“#加载”）.stop（true，true）.fadeIn（）.delay（200）.fadeOut（）；
});
var dati=“twitterpagination/get_messages/”+加载的_messages；
$.ajax({
url:'twitterpagination/get_messages/'+已加载的_messages，
键入：“get”，
资料来源：达蒂，
cache:false，
成功：函数（）{
$.get（数据，函数（数据）{
$（“#主要内容”）。追加（数据）；
});
如果（已加载消息>=num\u消息-10）{
$（“#更多按钮”）.hide（）；
}
},
错误：函数（）{
//无所事事
}
});
返回false；
});
更多

由Ajax url加载的文件：

<?php
  foreach($latest_messages as $message) {
    echo '<p>'.$message->message .'</p>';
  }
?>

---

从AJAX添加新html后，需要立即重新运行这两行jQuery

success: function() {
    $.get(dati, function(data){

        $("#main_content").append(data);
        // here
        $("#main_content > p:nth-child(3n+2)").addClass("small-product-wrapper");
        $("#main_content > p:nth-child(3n+3)").addClass("small-product-wrapper");
    });
}

---

这是因为加载页面时，这些原始行只运行一次。

当您使用Ajax加载新内容时，自动为其指定样式的唯一方法是为其指定一个类，并在css中定义该类样式

---

如果不这样做，则必须在ajax调用的回调函数中重新分配样式。

在ajax加载的文件中：

<?php
  foreach($latest_messages as $message) {
    echo '<p class="small-product-wrapper">'.$message->message .'</p>';
  }
?>

将样式添加到返回的p标记中