I have one array with the same ids of my div data-id: i need to do a loop for my array only for values without the class ".empty-box". In this case I need to cicle my array with value id 1, 2 and 3 because 4 and 5 have the same value of the div empty-box.
<div class="box" data-id="1"> </div>
<div class="box" data-id="2"> </div>
<div class="box" data-id="3"> </div>
<div class="box empty-box" data-id="4"> </div>
<div class="box empty-box" data-id="5"> </div>
var emptyBoxes = $('.empty-box')
var myArray = [
{id:1},
{id:2},
{id:3},
{id:4},
{id:5}
]
My solution look like this, but I'm not sure is the best way:
var myArray = [
{id:1},
{id:2},
{id:3},
{id:4},
{id:5}
]
var emptyBoxes = $('.empty-box');
var ids = [];
emptyBoxes.each(function(i, v){
ids.push($(v).data('id'));
})
var list = myArray.filter(function(el) {return !ids.includes(el.id)};
Have you got any solution?
With jQuery, you have access to the :not selector.
const nonEmptyBoxes = $('.box:not(.empty-box)');
You could use document.querySelectorAll('div.box[data-id]:not(.empty-box)') to get all the boxes that aren´t empty and have an id.
I´ve added an Example to show the speed difference.
var myArray = [
{id:1},
{id:2},
{id:3},
{id:4},
{id:5}
]
console.time('old');
var emptyBoxes = $('.empty-box');
var ids = [];
emptyBoxes.each(function(i, v){
ids.push($(v).data('id'));
})
var list = myArray.filter(function(el) {return !ids.includes(el.id)});
console.log(list);
console.timeEnd('old');
console.time('new');
const validBoxes = document.querySelectorAll('div.box[data-id]:not(.empty-box)');
let newList = [];
validBoxes.forEach((element) => {newList.push({id: element.getAttribute('data-id')})});
console.log(newList);
console.timeEnd('new');<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" data-id="1"> </div>
<div class="box" data-id="2"> </div>
<div class="box" data-id="3"> </div>
<div class="box empty-box" data-id="4"> </div>
<div class="box empty-box" data-id="5"> </div>