Estoy tratando de recuperar un elemento DOM de una matriz y quiero configurarlo como una variable para usar fuera de su alcance. En este momento, mi variable future_devices devuelve un objeto como se esperaba. Pero mi otra variable future_device devuelve el objeto cuando el DOM actual debería haber devuelto [] debido a mi última declaración if . Originalmente traté de declarar mis variables como var debido al alcance, pero eso no ayudó. Aquí está mi código:
var future_devices = $('.hardware .future-hardware') if (future_devices.length) { let future_device = $(future_devices) .each(function() { let device = this let device_work_order = $(device) .data( 'work-order' ) if (device_work_order == data['new_host']['work_order']) { return device } })Puedo decirte sobre dicho DOM, las dos variables que estoy usando para comparar tienen los siguientes valores:
dispositivo_trabajo_orden = 3MOD0
datos['nuevo_host']['orden_de_trabajo'] = 3MOD9
Entonces, dado que future_devices devuelve solo un objeto y mi última declaración if no es verdadera, debería obtener [], ¿verdad?
$(...) está devolviendo la colección jQuery y siempre lo hará independientemente. Entonces, una declaración de asignación que usa .each() es el enfoque incorrecto.
Solución : asigne el retorno de .filter() en su lugar. El filtro está diseñado para lograr su objetivo. Referencia
NOTA: Debe tener en cuenta que si hay más de una coincidencia, devolverá la colección completa de coincidencias. En el siguiente código, solo muestro la primera coincidencia, pero dado que hay dos coincidencias (para demostración), verá que se devuelven ambas coincidencias.
const future_devices = $('.hardware .future-hardware'); const data = {new_host: {work_order: 333}}; const future_device = $(future_devices) .filter(function(idx, el) { let device_work_order = $(el).data('work-order'); if (device_work_order == data['new_host']['work_order']) { return true; } else { return false; } }) console.log("First match only: ", future_device[0]); // First match console.log("Collection: ",future_device); // All matches <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="hardware"> <div class="future-hardware" data-work-order="111">111</div> </div> <div class="hardware"> <div class="future-hardware" data-work-order="333">First Match</div> </div> <div class="hardware"> <div class="future-hardware" data-work-order="111">111</div> </div> <div class="hardware"> <div class="future-hardware" data-work-order="333">Second Match</div> </div> <div class="hardware"> <div class="future-hardware" data-work-order="111">111</div> </div> <div class="hardware"> <div class="future-hardware" data-work-order="111">111</div> </div>