JQuery loop through multidimensional array

Question

I'm trying to loop through a multidimensional array. I want to remove the class "list" when it is in one of the div in my array. But it is possible that there is more than just one div with this class on my site.

So I tried to resolve that with two for-loops but I get it didn't work.

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>

I also tried it with CSS and :not[]. But that didn't work too.

.

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

classnames should be enclosed in quotes. .find(".list").removeClass("list"); — abhishekkannojia
– abhishekkannojia, Commented Oct 26, 2017 at 10:02

Ori Drori · Accepted Answer · 2017-10-26 10:07:15Z

1

Combine the selected divs by to one by applying jQuery.merge(), find all items that contains the .list class, and remove it:

And if you want to remove it just from first and third:

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>

edited Oct 26, 2017 at 10:07

answered Oct 26, 2017 at 10:01

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vicky patel · Accepted Answer · 2017-10-26 11:30:55Z

0

$(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>

answered Oct 26, 2017 at 11:30

vicky patel

7052 gold badges8 silver badges14 bronze badges

Collectives™ on Stack Overflow

JQuery loop through multidimensional array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related