改变孩子的班级

时间:2016-01-06 23:21:14

标签: jquery class children

我有2d数组“active [] []”我有0和1。首先看看我的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>

我想要的是当数组处于活动状态时为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();
            }
        }
    }

});

警告(i)在“smallbars = $('。place')[i] .find('。smallbar');”之后无法正常工作但之前有效。在我的JS代码中看到任何错误?请帮忙。我知道我不能形容你我想要的东西所以告诉我你在哪里看到任何错误。 Greatings,我在等待回应。

2 个答案:

答案 0 :(得分:1)

我认为这就是你想要的:

$(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++;
    });
});

答案 1 :(得分:0)

在jQuery对象上使用数组语法将返回一个不再包含在jQuery中的DOM元素。一种解决方案是使用.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