Question

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

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

有解决方案可以解决这个问题吗？

E.g：

档案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网址加载的文件：

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

Answer 1

在从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");
    });
}

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

Answer 2

在ajax加载的文件中：

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

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

Answer 3

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

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

加载Ajax的内容失去了风格

3 个答案: