php - 使用 Ajax 加载的内容会丢失样式

Question

我创建了一个加载 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>

Ajax url 加载的文件：

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

Answer 1

在ajax加载的文件中：

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

将样式添加到返回的 P 标签

Answer 2

从 AJAX 添加新的 html 后，您需要立即重新运行这 2 行 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");
    });
}

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

Answer 3

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

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