JQuery:循环遍历元素并设置为外部作用域的变量

Question

我正试图从数组中检索DOM元素，并希望将其设置为在其作用域之外使用的变量。现在，我的变量future_devices按预期返回一个对象。但是我的另一个变量future_device在当前DOM由于上一个if语句而应该返回[]时返回对象。由于作用域的原因，我最初试图将变量声明为var，但这没有帮助。这是我的代码：

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
}
})

我可以在上面的DOM上告诉你，我用来比较的两个变量有以下值：

device_work_order=3MOD0

数据['new_host']['work_order']=3MOD9

既然future_devices只返回一个对象，而我的上一个if语句不为真，我应该得到[]，对吧？

Answer 1

$(...)正在返回jQuery集合，并且无论怎样都会返回。因此，使用.each()的赋值语句是错误的方法。

解决方案：改为分配返回的.filter()。过滤器旨在实现您的目标。参考

注意：您应该意识到，如果有多个匹配，它将返回整个匹配集合。在下面的代码中，我只显示了第一个匹配，但由于有两个匹配(用于演示(，您将看到两个匹配都被返回。

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>