Question

我有一个同位素容器。我希望在容器中有两列（div），然后将项目动态地从数据库调用提供到这些列中。不知道该怎么做。我在下面的内容中将项目添加到容器中，但我似乎无法将项目放入容器内的div中。我想要两个div /列并排。

HTML

<div class="lawmakers">

        <!-- HOUSE -->
        <div class="left house">
            <h2>House</h2>


        </div><!-- End House -->

        <!-- Senate -->
        <div class="right senate">
            <h2>Senate</h2>


        </div><!-- End Senate -->

    </div><!-- END HOUSE/SENATE REPS -->

jquery的

    var $container = $('.lawmakers'),
      filters = {};

      $container.isotope({
        itemSelector : '.info'
      });


      var iso = $container.data('isotope');
      $container.isotope( 'reveal', iso.items );

    ...
$.post("php/getData.php", function(data){ 
            var obj = jQuery.parseJSON(data);

            for (var i=0; i< obj.length; i++) {
            //obtain data such as partyAbbrev and county
    var $newItems = $('<div class="info ' + partyAbbrev + ' ' + county + '">\
                    </div>');


        }
        $('.lawmakers').isotope( 'insert', $newItems );
});

Answer 1

只需声明并初始化容器：

var $houseContainer = $('.lawmakers .house');
var $senateContainer = $('.lawmakers .senate');

$houseContainer.isotope({
    itemSelector : '.info'
});
$senateContainer.isotope({
    itemSelector : '.info'
});

...

$houseContainer.isotope('insert', $newItems /* or whatever */);
$senateContainer.isotope('insert', $newItems /* or whatever */);

作为旁注，您可以替换$.post：

$.post("php/getData.php", function(data){ 
    var obj = jQuery.parseJSON(data);
});

使用$.getJSON：

$.getJSON("php/getData.php", function(obj) {
});

在同位素js的两列中动态排列项目

1 个答案: