jQuery的 - 改变元素不会克隆

Question

我已经改变了元素的HTML文本，在这种情况下＃main_cluster_id_reach_12

$("#main_cluster_id_reach_12").html('400').effect("highlight", {color: '#2a6500'}, 60000 * 5); 

这工作正常，但是当我尝试克隆了一个持有它的容器（＃应用程序），它不包含＃main_cluster_id_reach_12的更新后的html，而是包含与该页面一起加载的原始文本。下面是我如何克隆它：

var $applications = $('#applications'); 
var $data = $applications.clone(); 

我在做什么错了？

编辑：这里是JS和HTML。我正在使用jquery 1.7.2

我想要做的是通过ajax更新10秒间隔内的一组集群的范围，然后通过li流畅的物品排序。更新没有问题，但quicksand克隆原始列表，而不是更新列表。今天早上我一直在玩一些日志记录，看来在ajax更新完成之前发生了克隆。

// quicksand sorting plugin 
(function($) { 
    $.fn.sorted = function(customOptions) { 
    var options = { 
     reversed: true, 
     by: function(a) { return a.text(); } 
    }; 
    $.extend(options, customOptions); 
    $data = $(this); 
    arr = $data.get(); 
    arr.sort(function(a, b) { 
     var valA = options.by($(a)); 
     var valB = options.by($(b)); 
     if (options.reversed) { 
     return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;    
     } else {  
     return (valA < valB) ? -1 : (valA > valB) ? 1 : 0; 
     } 
    }); 
    return $(arr); 
    }; 
})(jQuery); 


$(document).ready(function(){ 
    //loop through all reaches to update 
    setInterval(function() { 
     //reach 
     $("[id^='main_cluster_id_reach_']").each(function(){ 

      //Check for reach updates 

      //get cluster id first 
      var cluster_id = parseInt(this.id.replace("main_cluster_id_reach_", "")); 

      //get cluster reach   
      $.post("./lib/ajax/meme_cluster_update.php", { cluster_id: cluster_id }, 
       function(data) { 

       //get reach - new 
       var new_reach = 0; 

       new_reach = parseInt(data.ItemReach, 10); 

       //get reach - old 
       var reach = $("#main_cluster_id_reach_" + cluster_id).html(); 

       // Format as American input 
       reach = parseInt(reach.replace(/[^\d\.\-\ ]/g, '')); 

       //compare new vs old and change cell view 
       compareReach(cluster_id, reach, new_reach); 

      }, "json"); 
     }); 

     // get the first collection 
     var $applications = $('#applications'); 

     // clone applications to get a second collection 
     var $data = $applications.clone(); 

     var $filteredData = $data.find('li[data-type=app]'); 

     var $sortedData = $filteredData.sorted({ 
      by: function (v) { 
       return parseFloat($(v).find('span[data-type=size]').text()); 
      } 
     }); 

     // finally, call quicksand 
     $applications.quicksand($sortedData, { 
      duration: 800, 
      easing: 'easeInOutQuad' 
     }); 
    }, 10000); 

    //compare the reaches to update accordingly 
    function compareReach(cluster_id, reach, new_reach) { 
     //determine what color to change cells 
     if(new_reach > reach) { 
      $(".main_cluster_id_reach_" + cluster_id).html(new_reach).effect("highlight", {color: '#2a6500'}, 60000 * 5); 
     } 
     else if(new_reach < reach) { 
      $(".main_cluster_id_reach_" + cluster_id).html(new_reach).effect("highlight", {color: '#990004'}, 60000 * 5); 
     } 
    } 

HTML

<div class="span-24" id='demo'> 
     <ul id="applications" class="image-grid"> 
      <li data-id="id-210639" data-type="app" class='cluster'> 
       <div class='cluster_byline'>@awkwardisco</div> 
       <div class="cluster_padding"> 
        <span class='cluster_headline'>Avengers on Thursday!!!</span> 
        <br> 
        <div class="cluster_stats"> 
         <div class="span-2 reach"> 
          <strong>REACH</strong> 
          <p id="main_cluster_id_reach_210639">26777</p> 
          <span class="main_cluster_id_reach_210639" data-type="size">26777</span> 
         </div> 
        </div> 
       </div> 
      </li> 
     </ul> 
    </div> 

Answer 1

感谢所有帮助大家。我遇到了另一个可用的thread解决方案。从js的角度来看，这不是很好，或者可能是理想的，但它的工作。我在做什么是计算所经历的每个循环项目，然后数时在.post的阿贾克斯在达到这个数值，即信号的最后一个Ajax调用完成后，我运行克隆和流沙操作。

setInterval(function() { 
     var flag = 0; //to determine when each is complete 

     var count = $("[id^='main_cluster_id_reach_']").length; 

     //reach 
     $("[id^='main_cluster_id_reach_']").each(function(){ 

      //Check for reach updates 

      //get cluster id first 
      var cluster_id = parseInt(this.id.replace("main_cluster_id_reach_", "")); 

      //get cluster reach 
      $.post("./lib/ajax/meme_cluster_update.php", { cluster_id: cluster_id }, 
       function(data) { 

       //get reach - new 
       var new_reach = 0; 

       new_reach = parseInt(data.ItemReach, 10); 

       //get reach - old 
       var reach = $("#main_cluster_id_reach_" + cluster_id).html(); 

       // Format as American input 
       reach = parseInt(reach.replace(/[^\d\.\-\ ]/g, '')); 

       //compare new vs old and change cell view 
       compareReach(cluster_id, reach, new_reach); 

       flag++; 

       //if ajax is done then sort 
       if(flag == count) { 
        console.log("Flags Equal, Each Complete, Now Sort"); 
        quicksandSort(); 
       } 

      }, "json");    
     }); 
    }, 10000); 

    //sort with quicksand 
    function quicksandSort() { 
     // get the first collection 
     var $applications = $('#applications'); 

     // clone applications to get a second collection 
     var $data = $applications.clone(true); 

     var $filteredData = $data.find('li[data-type=app]'); 

     var $sortedData = $filteredData.sorted({ 
      by: function (v) { 
       return parseFloat($(v).find('span[data-type=size]').text()); 
      } 
     }); 

     // finally, call quicksand 
     $applications.quicksand($sortedData, { 
      duration: 2000, 
      easing: 'easeInOutQuad' 
     }); 
    }