Tengo una matriz con los mismos identificadores de mi identificador de datos div: necesito hacer un ciclo para mi matriz solo para valores sin la clase ".empty-box". En este caso, necesito hacer un ciclo de mi matriz con el valor id 1, 2 y 3 porque 4 y 5 tienen el mismo valor de la caja vacía div.
<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} ]Mi solución se ve así, pero no estoy seguro de que sea la mejor manera:
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)};¿Tienes alguna solución?
Con jQuery, tiene acceso al selector :not .
const nonEmptyBoxes = $('.box:not(.empty-box)');Puede usar document.querySelectorAll('div.box[data-id]:not(.empty-box)') para obtener todos los cuadros que no están vacíos y tienen una identificación.
He agregado un ejemplo para mostrar la diferencia de velocidad.
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>