Question

我更改了元素的html文本，在本例中为＃main_cluster_id_reach_12

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

这很好但是当我尝试克隆持有它的容器（#applications）时，它不包含＃main_cluster_id_reach_12的更新html，而是包含页面加载的原始文本。以下是我克隆它的方法：

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

我做错了什么？

编辑：这是js和html。我正在使用jquery 1.7.2

我要做的是通过ajax以10秒的间隔更新一组群集的覆盖范围，然后根据他们的触及范围来定位带有流沙的li项目。更新发生没有问题，但流沙克隆原始列表，而不是更新列表。今天早上我一直在玩一些日志记录，看来克隆正在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的角度来看它并不漂亮或者甚至可能是理想的，但是它正在发挥作用。我正在做的是计算每个循环中的项目数量，然后在ajax .post中达到该数量时，即发出最后一个ajax调用完成的信号，我运行克隆和流沙操作。 / p>

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'
        }); 
    }

jQuery - 更改的元素不会克隆

1 个答案: