多次元配列によるJQueryループ

Question

多次元配列をループしようとしています。私はクラス "リスト"私の配列内のdivの1つにあるときに削除したいと思います。しかし、私のサイトにこのクラスのdivが1つ以上ある可能性があります。

私は2つのfor-loopsで解決しようとしましたが、うまくいきませんでした。

const $lists = [ 
 
       $('.first'), 
 
       $('.third') 
 
      ]; 
 

 
var i, j; 
 
for (i = 0; i < $lists.length; i++) { 
 
    for (j = 0; j < $lists[i].length; j++){ 
 
     $lists[i][j].find(.list).removeClass(list); 
 
    } 
 
}

.list { 
 
    background: green; 
 
}

<div class="first"> 
 
    <ul class="list"> 
 
    <li>foo</li> 
 
    <li>fooooo</li> 
 
    <li>bar</li> 
 
    </ul> 
 
</div> 
 

 
<div class="first"> 
 
    <ul class="list"> 
 
    <li>foo</li> 
 
    <li>fooooo</li> 
 
    <li>bar</li> 
 
    </ul> 
 
</div> 
 

 
<div class="second"> 
 
    <ul class="list"> 
 
    <li>foo</li> 
 
    <li>fooooo</li> 
 
    <li>bar</li> 
 
    </ul> 
 
</div> 
 

 
<div class="third"> 
 
    <ul class="list"> 
 
    <li>foo</li> 
 
    <li>fooooo</li> 
 
    <li>bar</li> 
 
    </ul> 
 
</div>

また、私はCSSでそれを試してみました：ありません[]。しかし、それはうまくいきませんでした。

。

.list:not(.first) { 
    border: 3px solid red; } 

Answer 1

、jQuery.merge()を適用することによって、1にすることによって選択されたdivを組み合わせる.listクラスが含まれているすべてのアイテムを見つけて、それを削除します。

そして、あなたは、第1および第3のからそれを削除したい場合：

var $lists = [ 
 
    $('.first'), 
 
    $('.third') 
 
]; 
 

 
$($.merge.apply([], $lists)).find('.list').removeClass('list');

.list { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="first"> 
 
    <ul class="list"> 
 
    <li>foo</li> 
 
    <li>fooooo</li> 
 
    <li>bar</li> 
 
    </ul> 
 
</div> 
 

 
<div class="second"> 
 
    <ul class="list"> 
 
    <li>foo</li> 
 
    <li>fooooo</li> 
 
    <li>bar</li> 
 
    </ul> 
 
</div> 
 

 
<div class="third"> 
 
    <ul class="list"> 
 
    <li>foo</li> 
 
    <li>fooooo</li> 
 
    <li>bar</li> 
 
    </ul> 
 
</div>

Answer 2

$(document).ready(function(){ 
 
$(".second").not(".first, .third").addClass("list") 
 
});

.list { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="first"> 
 
    <ul> 
 
    <li>foo</li> 
 
    <li>fooooo</li> 
 
    <li>bar</li> 
 
    </ul> 
 
</div> 
 

 
<div class="second"> 
 
    <ul> 
 
    <li>foo</li> 
 
    <li>fooooo</li> 
 
    <li>bar</li> 
 
    </ul> 
 
</div> 
 

 
<div class="third"> 
 
    <ul> 
 
    <li>foo</li> 
 
    <li>fooooo</li> 
 
    <li>bar</li> 
 
    </ul> 
 
</div>