Changing class of childrens

Question

I have 2d array "active[][]" whan I have 0s and 1s. First look at my 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>

What I want is change class of smallbars when is 1 at array active. Just look:

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(i) not work after "smallbars = $('.place')[i].find('.smallbar');" but works before. See you any mistakes in my JS code? Please help. I know I can't describe you what I want so just tell me where you see any mistakes. Greatings, I am waiting for responses.

Answer 1

Using array syntax on a jQuery object will return a DOM element that is no long wrapped in jQuery. One solution is to use .eq(index) instead:

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

However, after looking at your code I would suggest writing it using .each to make looping easier on yourself:

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

If you want to get your code working with minimal changes, you could simply use .eq in two places where you are using array accessors.

Example Fiddle With Minimal Changes