加載內容的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> 

文件：

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

Answer 1

在阿賈克斯加載的文件：

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

添加樣式返回p標籤

Answer 2

您需要重新運行那些2線的jQuery右AF之三新的HTML從你的AJAX增加。

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調用的回調函數再次分配的風格。