Несколько экземпляров изотопного jQuery

у меня очень странная проблема

Я загружаю два отдельных div, как показано ниже, элемент span предназначен для хранения количества элементов в строке, существующих в каждом экземпляре Isotope.

<div class='instagram' id='insta12'>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
<span id="hiddenValue" >5</span>
</div>

<div class='instagram' id='insta101'>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
<span id="hiddenValue">3</span>
</div>

И мой файл js показан ниже.

jQuery(document).ready(function($) {
  var tmpNum="";
  var numberOfImages=3;
  var $container = $('.instagram');
  $container.each(function ()  {

  tmpNum=  $(this).find('span#hiddenValue').text();
  numberOfImages=parseInt(tmpNum);
  var tmpid=$(this).attr("id");
  alert(tmpid);
    $("#"+tmpid).imagesLoaded(function() {
      $("#"+tmpid).isotope({ 
        resizable: false, 
        // disable normal resizing
        // set columnWidth to a percentage of container width
        masonry: { 
        columnWidth:  $("#"+tmpid).width() / numberOfImages 
        } 
      });

    }); //isotope
  });         //each
}); //dom ready

Хотя кажется, что скрипт работает, во втором контейнере столько же элементов в строке, сколько и в первом контейнере. Любые идеи?


javascript jquery jquery-isotope
person TheodoreV    schedule 03.09.2012    source источник
comment
Вы действительно не должны иметь один и тот же идентификатор несколько раз в одном документе, как с #hiddenValue.   -  person bfncs    schedule 24.01.2013

Ответы (1)


arrow_upward
1
arrow_downward

Решено

jQuery(document).ready(function($) {
    var tmpNum = "";
    var $container = $('.instagram');
    $container.each(function() {
        var tmpid = $(this).attr("id");
        tmpNum = $("#" + tmpid + " span#hiddenValue").text();
        var numberOfImages = parseInt(tmpNum, 10);
        $(this).imagesLoaded(function() {
            $(this).isotope({
                resizable: false,
                // disable normal resizing
                // set columnWidth to a percentage of container width
                masonry: {
                    columnWidth: $(this).width() / numberOfImages
                }
            });
        }); //isotope
    }); //each
}); //dom ready
person TheodoreV    schedule 03.09.2012