Question

I’ve create a page that load 10 elements and at the bottom of the page I’ve placed the classic button “load more” to load 10 more elements.

The problem is with jQuery, the style given by :nth-child() property doesn’t work for the next 10 elements and so on.

Is there a solution to solve this problem?

E.g.:

File main.js

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

File 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>

File loaded by Ajax url:

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

Answer 1

In the file loaded by ajax:

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

Add the style to the returned P tag