JQuery：遍历元素并设置为外部范围的变量

Posted 2023-05-08

【中文标题】JQuery：遍历元素并设置为外部范围的变量

【英文标题】：JQuery: Loop through elements and set as variable for outside scope

【发布时间】：2022-01-02 12:32:28

【问题描述】：

我正在尝试从数组中检索 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 声明不正确，我应该得到[]，对吧？

【问题讨论】：

可以分享一下你的html元素结构吗？

【参考方案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>

【讨论】：

谢谢！我使用了您的解决方案，这给了我想要的结果！实际上我之前看到过这个功能并且我尝试使用它，但我也无法让它工作。我认为我的主要问题是我没有使用 function() 并返回一个对象。我想我也不完全理解 .each() 方法。不过谢谢你的回复！从那时起，我就在我的代码中使用这种方法与 .each() 其他地方似乎更合适，并使用“返回”功能