正在更改 class 个孩子

Question

我有二维数组 "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 时更改 class smallbars。看看：

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) 在 "smallbars = $('.place')[i].find('.smallbar');" 之后不起作用，但在 "smallbars = $('.place')[i].find('.smallbar');" 之前起作用。看到我的 JS 代码有什么错误吗？请帮忙。我知道我无法向您描述我想要的内容，所以请告诉我您在哪里看到任何错误。大家好，我正在等待回复。

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

Answer 2

在 jQuery 对象上使用数组语法将 return 一个不再包含在 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

正在更改 class 个孩子

Changing class of childrens

jquery

children

class