Изменение класса детей

Question

У меня есть 2d массив "active [] []" whan У меня есть 0s и 1s. Первый взгляд на мой HTML:

<div class="place"> 
<div class="bigbaractive">1</div> 
    <div class="smallbar"><div class="lock2"></div>1.1</div> 
    <div class="smallbar"><div class="lock2"></div>1.2</div> 
    <div class="smallbar"><div class="lock2"></div>1.3</div> 
    <div class="smallbar"><div class="lock2"></div>1.4</div> 
    <div class="smallbar"><div class="lock2"></div>1.5</div> 
    <div class="smallbar"><div class="lock2"></div>1.6</div> 
    <div class="smallbar"><div class="lock2"></div>1.7</div> 
    <div class="smallbar"><div class="lock2"></div>1.8</div> 
    <div class="smallbar"><div class="lock2"></div>1.9</div> 
</div> 

<div class="place"> 
<div class="bigbaractive">2</div> 
     <div class="smallbar"><div class="lock2"></div>2.1</div> 
    <div class="smallbar"><div class="lock2"></div>2.2</div> 
    <div class="smallbar"><div class="lock2"></div>2.3</div> 
    <div class="smallbar"><div class="lock2"></div>2.4</div> 
</div> 

<div class="place"> 
<div class="bigbaractive">3</div> 
    <div class="smallbar"><div class="lock2"></div>3.1</div> 
    <div class="smallbar"><div class="lock2"></div>3.2</div> 
    <div class="smallbar"><div class="lock2"></div>3.3</div> 
    <div class="smallbar"><div class="lock2"></div>3.4</div> 
    <div class="smallbar"><div class="lock2"></div>3.5</div> 
    <div class="smallbar"><div class="lock2"></div>3.6</div> 
    <div class="smallbar"><div class="lock2"></div>3.7</div> 
</div> 

Что я хочу изменить класс smallbars, когда это 1 в массиве активной. Только посмотрите:

jQuery(document).ready(function() 
{ 
    var ile; 
    var smallbars = []; 
    for(var i=0; i<10; i++) 
    { 
     smallbars = $('.place')[i].find('.smallbar'); 
     alert(i); 
     for(var j=0; j<smallbars.length; j++) 
     { 
      if(active[i][j] == 1) 
      { 
       smallbars[j].toggleClass("smallbaractive"); 
       smallbars[j].firstChild.remove(); 
      } 
     } 
    } 

}); 

Alert (я) не работает после того, как "smallbars = $ [я] .find ('smallbar. ') (' Место.');" но работает раньше. Увидите ли вы какие-либо ошибки в моем JS-коде? Пожалуйста помоги. Я знаю, что не могу описать вас, что хочу, просто скажите мне, где вы видите ошибки. Поздравляю, я жду ответов.

Answer 1

Использование синтаксиса массива на объект JQuery возвращает DOM элемент, который не не долго, завернутые в JQuery. Одним из решений является использование .eq(index) вместо:

$('.place')[i]  // --> DOM element 
$('.place').eq(i) // --> jQuery object with just that element 

Однако, посмотрев на свой код, который я хотел бы предложить писать его с помощью .each сделать зацикливание легче на себя:

jQuery(document).ready(function() { 
    var ile; 
    var smallbars = []; 
    $('.place').each(function(indexPlace, elPlace) { 
      $(this).find(".smallbar").each(function(indexSmallBar, elSmallBar) { 
      if (active[indexPlace][indexSmallBar] == 1) { 
        $(this).toggleClass("smallbaractive") 
         .find(">:first-child") 
         .remove(); 
      } 
     }) 
    }) 
}); 

Example Fiddle

Если вы хотите, чтобы ваш код работал с минимальными изменениями, вы могли бы просто использовать .eq в двух местах, где вы используете приемники массивов.

Example Fiddle With Minimal Changes

Answer 2

Я думаю, что это то, что вы хотите:

$(document).ready(function() { 
    var active = [[1,2],[3,4],[5,6]]; 
    var i = 0; 
    $('.place').each(function(){ 
     var j = 0; 
     $(this).children('.smallbar').each(function(){ 
      if(active[i][j] == 1) { 
       $(this).toggleClass('smallbaractive'); 
       $(this).children(':first').remove(); 
      } 
      j++; 
     }); 
     i++; 
    }); 
});