Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #31084

Re: filter queryselectorall

Show all headers | View raw

Michael Haufe (TNO) wrote:

> On Friday, August 5, 2016 at 11:25:40 PM UTC-5, Andrew Poulos wrote:
>> var clickables = document.querySelectorAll('[id^="clickable_"]').filter(
>>    function() {
>>      return this.id.match(/_\d*$/);
>> });
>> 
>> gives me ...filter is not a function.
>> 
>> How can I get just the elements whose ID that starts with "clickable_"
>> and ends with an integer?

Your approach would, if it worked verbatim, find elements with IDs 
“clickable__” and “clickable__2”, too.  You have made the integer *optional* 
with the “*” and you have not excluded consecutive “_”s.

“this” does _not_ refer to the current element in an 
Array.prototype.filter() loop callback, but to the global object in normal 
mode, and it is “undefined” in strict mode, by default; you can set “this” 
with the second argument of .filter(), but obviously not to the current 
element in the loop, too.

(AISB:) String.prototype.match() is _not_ the proper method to use if you 
only want to *test* *if* a string matches a regular expression.  In that 
case, use RegExp.prototype.test() instead; an additional advantage of it is 
that it converts the argument to String, whereas you have to typecast to 
String explicitly (or use "".match.call() or "".match.apply()) if you want 
to call String.prototype.match() on a value that you cannot be sure is a 
String value.

> querySelectorAll does not return an Array. It returns a NodeList. You'll
> want to convert it to an array proper first:
> 
> let qsa = (s,ctx=document) => Array.from(ctx.querySelectorAll(s))
> 
> polyFill as necessary for your target environments, or use a JS compiler
> such as Babel or TypeScript

That is taking a sledgehammer to crack a nut.

Instead:

  var clickables = [].filter.call(
    document.querySelectorAll('[id^="clickable_"]'),
    function (element) { return /_\d+$/.test(element.id); });

Alternatively:

  var clickables = [].filter.call(
    document.getElementsByTagName("*"),
    function (element) { return /^clickable_.*\d+$/.test(element.id); });

To mark and find suitable elements, consider using a “data-clickable” 
attribute as a marker and to filter on that attribute using the above, 
instead.  Where that is not Valid (e.g. HTML < 5, default XHTML < 5), 
consider using a “js-clickable” class as a marker and 
document.getElementsByClassName("js-clickable") instead (the “js-” prefix 
makes sure your script-related classes do not interfere with classes that 
you use for styling; it is intended to work like a namespace).

Reconsider your search context.  Do you really need to search the whole 
document?

If, e.g., this is for a form, consider using form.elements["clickable"] or 
form.getElementsByName("clickable") [may find more elements than the former] 
to find all elements with name "clickable" instead.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

filter queryselectorall Andrew Poulos <ap_prog@hotmail.com> - 2016-08-06 14:25 +1000
  Re: filter queryselectorall "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-08-05 22:23 -0700
    Re: filter queryselectorall Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-08-06 08:16 +0200
      Re: filter queryselectorall "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-08-06 15:49 -0700
        Re: filter queryselectorall Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-08-07 07:08 +0200
          Re: filter queryselectorall Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2016-08-07 07:17 +0200
            Re: filter queryselectorall Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-08-07 07:58 +0200
          Re: filter queryselectorall "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-08-07 10:30 -0700
            Re: filter queryselectorall Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-08-07 21:16 +0200
              Re: filter queryselectorall "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-08-09 21:18 -0700
                Re: filter queryselectorall Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-08-15 22:02 +0200
                Re: filter queryselectorall "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-08-15 23:16 -0700
  Re: filter queryselectorall "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-08-06 10:28 +0200

csiph-web