JavaScript:将每个 querySelectorAll 结果推送到变量中

马丁·鲍尔

你能看到我在这里做什么吗?我想将一些对象推送到一个变量中,但要保持所有内容整洁并包含在内。

var toggles = document.querySelectorAll('[data-search-toggle]').forEach(function(el) {
      this.push({ 'element': el, 'select': el.dataset });
    });

显然上面的代码不起作用,这只是我想要的概念,所以如果我要toggles在下面的console.log中,我会得到以下行:

[
  { 
    'element': [Object],
    'select': 'dropdown-search__select--make'
  },
  { 
    'element': [Object],
    'select': 'dropdown-search__select--make'
  },
  { 
    'element': [Object],
    'select': 'dropdown-search__select--make'
  },
]

编辑:或者我需要做这样的事情:

var tmp;
var toggles = document.querySelectorAll('[data-search-toggle]').forEach(
  tmp.push(function(el) {
    return { 'element': el, 'select': el.dataset };
  })
);

HTML:

<input type="radio" class="dropdown-search__radio" name="vehtype" id="dropdown-search__vehtype--cars" value="cars" checked required data-search-toggle="dropdown-search__select--make">
        <label class="dropdown-search__label--radio" for="dropdown-search__vehtype--cars">Cars</label>

        <input type="radio" class="dropdown-search__radio dropdown-search__radio" name="vehtype" id="dropdown-search__vehtype--vans" value="vans" data-search-toggle="dropdown-search__select--make">
        <label class="dropdown-search__label--radio" for="dropdown-search__vehtype--vans">Vans</label>

        <input type="radio" class="dropdown-search__radio dropdown-search__radio" name="vehtype" id="dropdown-search__vehtype--bikes" value="bikes" data-search-toggle="dropdown-search__select--make">
        <label class="dropdown-search__label--radio" for="dropdown-search__vehtype--bikes">Bikes</label>
简单J

您可以querySelectorAll使用该Array.from函数将 的结果转换为数组,并将map 函数作为第二个参数传递以将每个元素包装在一个对象中。

const toggles = Array.from(document.querySelectorAll('[data-search-toggle]'), (el) => {
  return {
    element: el,
    select: el.dataset
  };
});

console.log(toggles);
<input type="radio" class="dropdown-search__radio" name="vehtype" id="dropdown-search__vehtype--cars" value="cars" checked required data-search-toggle="dropdown-search__select--make">
<label class="dropdown-search__label--radio" for="dropdown-search__vehtype--cars">Cars</label>

<input type="radio" class="dropdown-search__radio dropdown-search__radio" name="vehtype" id="dropdown-search__vehtype--vans" value="vans" data-search-toggle="dropdown-search__select--make">
<label class="dropdown-search__label--radio" for="dropdown-search__vehtype--vans">Vans</label>

<input type="radio" class="dropdown-search__radio dropdown-search__radio" name="vehtype" id="dropdown-search__vehtype--bikes" value="bikes" data-search-toggle="dropdown-search__select--make">
<label class="dropdown-search__label--radio" for="dropdown-search__vehtype--bikes">Bikes</label>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何从 querySelectorAll() 的每个结果中获取属性

来自分类Dev

如何拆分 querySelectorAll 结果?

来自分类Dev

如何筛选querySelectorAll结果?

来自分类Dev

搜索querySelectorAll调用的结果

来自分类Dev

Javascript querySelectorAll('*')返回格式

来自分类Dev

javascript document.querySelectorAll

来自分类Dev

无法将XMLSlurper结果推送到Set中

来自分类Javascript

querySelector和querySelectorAll与JavaScript中的getElementsByClassName和getElementById

来自分类Dev

在getElementById之后使用querySelectorAll在javascript中不起作用

来自分类Dev

库中的querySelectorAll

来自分类Dev

TypeScript中的querySelectorAll等效

来自分类Dev

查找并推送结果将两个对象推送到数组中

来自分类Dev

如何遍历Nightwatch中的querySelectorAll结果

来自分类Dev

Javascript querySelectorAll未定义

来自分类Dev

为什么在将Javascript对象推送到数组之前必须将其存储在变量中?

来自分类Dev

使用JavaScript将复杂的JSON记录推送到JSON变量中

来自分类Dev

Rails将元素推送到结果查询

来自分类Dev

猫鼬将结果推送到数组

来自分类Dev

将数据推送到php中每个值的末尾

来自分类Dev

JavaScript:递归之间需要共享数组,以将结果推送到

来自分类Dev

将C#变量推送到JavaScript时出错

来自分类Dev

使用javascript将变量推送到现有函数

来自分类Dev

将多种方法的结果推送到数组中的干净方法

来自分类Dev

如何将外部请求的结果推送到 firebase 中的 realtimeDB?

来自分类Dev

为什么我的方法没有将结果推送到数组中?

来自分类Dev

将AJAX查询结果的每个值存储到Javascript变量

来自分类Dev

嘗試將兩個 querySelectorAll 項目添加到 JavaScript 中的 forEach 循環

来自分类Dev

谷歌分析 api:将存储在变量中的数据推送到 maria db

来自分类Dev

如何将值从 PHP 推送到 Angular 定义的变量中?

Related 相关文章

  1. 1

    如何从 querySelectorAll() 的每个结果中获取属性

  2. 2

    如何拆分 querySelectorAll 结果?

  3. 3

    如何筛选querySelectorAll结果?

  4. 4

    搜索querySelectorAll调用的结果

  5. 5

    Javascript querySelectorAll('*')返回格式

  6. 6

    javascript document.querySelectorAll

  7. 7

    无法将XMLSlurper结果推送到Set中

  8. 8

    querySelector和querySelectorAll与JavaScript中的getElementsByClassName和getElementById

  9. 9

    在getElementById之后使用querySelectorAll在javascript中不起作用

  10. 10

    库中的querySelectorAll

  11. 11

    TypeScript中的querySelectorAll等效

  12. 12

    查找并推送结果将两个对象推送到数组中

  13. 13

    如何遍历Nightwatch中的querySelectorAll结果

  14. 14

    Javascript querySelectorAll未定义

  15. 15

    为什么在将Javascript对象推送到数组之前必须将其存储在变量中?

  16. 16

    使用JavaScript将复杂的JSON记录推送到JSON变量中

  17. 17

    Rails将元素推送到结果查询

  18. 18

    猫鼬将结果推送到数组

  19. 19

    将数据推送到php中每个值的末尾

  20. 20

    JavaScript:递归之间需要共享数组,以将结果推送到

  21. 21

    将C#变量推送到JavaScript时出错

  22. 22

    使用javascript将变量推送到现有函数

  23. 23

    将多种方法的结果推送到数组中的干净方法

  24. 24

    如何将外部请求的结果推送到 firebase 中的 realtimeDB?

  25. 25

    为什么我的方法没有将结果推送到数组中?

  26. 26

    将AJAX查询结果的每个值存储到Javascript变量

  27. 27

    嘗試將兩個 querySelectorAll 項目添加到 JavaScript 中的 forEach 循環

  28. 28

    谷歌分析 api:将存储在变量中的数据推送到 maria db

  29. 29

    如何将值从 PHP 推送到 Angular 定义的变量中?

热门标签

归档