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() 的返回值。过滤器旨在实现您的目标。 Reference

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

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>