Bootstrap 5 will remove jQuery as a dependency

Re:Bootstrap 5 will remove jQuery as a dependency by Carpetsmoker on Tuesday February 12, 2019 @07:18PM (#19149124)

> Side benefit: also no weird $(thing)[0] when you need to use a DOM API, like HTML5 validity or whatever.

But looping over querySelectorAll() is painful. I'm not really a frontend dev, so perhaps I'm doing it wrong, but this is the "easier" way I found when I was writing an app a few weeks ago (in TypeScript):

  // Get Array of HTMLElements from querySelectorAll().
  let queryAll = (q: string): HTMLElement[] => {
    let nodes = document.querySelectorAll(q);

    let arr: HTMLElement[] = [];
    arr.length = nodes.length;

    for (let i = 0; i < nodes.length; i++) {
      if (!(nodes[i] instanceof HTMLElement)) {
        arr.length--;
        continue;
      }

      arr[i] = nodes[i] as HTMLElement;
    }

    return arr;
  };

[ Parent | on HN ]

Re:Bootstrap 5 will remove jQuery as a dependency by nailer on Tuesday February 12, 2019 @07:43PM (#19149272)

> But looping over querySelectorAll() is painful.

Not any more:

    let elements = document.querySelectorAll('.some-class')
    elements.forEach(function(element){
      ...
    })

https://developer.mozilla.org/en-US/docs/Web/API/NodeList/fo...

PS. The other two answers here are outdated.

[ Parent | on HN ]

Re:Bootstrap 5 will remove jQuery as a dependency by Carpetsmoker on Thursday February 14, 2019 @12:56AM (#19159907)

I should have explained the use case better: I need to store an indexed array of elements for cache/querying later on; so forEach() isn't a good fit here.

Other people suggested Array.from(), but that won't work in IE, and the polyfill for it is a lot longer/more complex than the for loop I wrote.

[ Parent | on HN ]

Re:Bootstrap 5 will remove jQuery as a dependency by j79 on Tuesday February 12, 2019 @09:24PM (#19149807)

> PS. The other two answers here are outdated.

Sure, the other two answers may be "outdated" but they're still extremely useful if you're looking to calling map/filter/etc against your queried elements.

[ Parent | on HN ]

Re:Bootstrap 5 will remove jQuery as a dependency by runarberg on Wednesday February 13, 2019 @01:19AM (#19150890)

For that you can write:

    const elements = document.querySelectorAll('.some-class');
    const values = Array.prototype.map.call(elements, element => element.value);

or more idiomatically (and perhaps a little slower):

    const elements = [...document.querySelectorAll('.some-class')];
    const values = elements.map(element => element.value);

[ Parent | on HN ]

Re:Bootstrap 5 will remove jQuery as a dependency by nailer on Wednesday February 13, 2019 @03:44AM (#19151493)

They asked about looping, not mapping or filtering.

[ Parent | on HN ]

Re:Bootstrap 5 will remove jQuery as a dependency by runarberg on Tuesday February 12, 2019 @07:59PM (#19149387)

Or if you prefer:

    for (const element of document.querySelectorAll('.some-class')) {
      // ...
    }

[ Parent | on HN ]

Re:Bootstrap 5 will remove jQuery as a dependency by nicoburns on Tuesday February 12, 2019 @07:36PM (#19149228)

  let queryAll = (q: string): HTMLElement[] => {
    let nodes = document.querySelectorAll(q);
    return Array.from(nodes).filter(node => (node instanceof HTMLElement)) as HTMLElement[];
  }

Will do the same. Note that `Array.from()` is a relatively new method, that you will need to polyfill if you wish to support internet explorer, but `Array.prototype.slice.call()` serves the same purpose and can be used in older browsers.

[ Parent | on HN ]

Re:Bootstrap 5 will remove jQuery as a dependency by rmrfrmrf on Tuesday February 12, 2019 @07:31PM (#19149201)

    return Array.from(document.querySelectorAll(q));

[ Parent | on HN ]

Re:Bootstrap 5 will remove jQuery as a dependency by Carpetsmoker on Thursday February 14, 2019 @12:52AM (#19159896)

This won't filter SVG elements, and unfortunately Array.from isn't available in IE (and perhaps some other browsers that are still in use).

[ Parent | on HN ]

Re:Bootstrap 5 will remove jQuery as a dependency by mercer on Wednesday February 13, 2019 @05:23PM (#19157711)

[...document.querySelectorAll(el)]

[ Parent | on HN ]