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

Groups > comp.lang.javascript > #36007

Re: selector for queryselectorAll

Show all headers | View raw

Andrew Poulos wrote:
> I have some HTML that looks like
> 
> <div data-goisbi="1">
>      <a class="rightarrow" href="..">link</a>
> </div>
> <div data-goisbi="0">
>      <a class="rightarrow" href="..">link</a>
> </div>
> <div data-goisbi="0">
>      <a class="rightarrow" href="..">link</a>
> </div>
> <div data-goisbi="0">
>      <a class="downarrow" href="..">link</a>
> </div>
> 
> <div data-goed="1">
>      <a class="downarrow" href="..">link</a>
> </div>
> <div data-goed="0">
>      <a class="rightarrow" href="..">link</a>
> </div>
> 
> <div data-gosbl="1">
>      <a class="downarrow" href="..">link</a>
> </div>
> <div data-gosbl="0">
>      blah
> </div>
> <div data-gosbl="0">
>      blah
> </div>
> 
> 
> How do I create a selector that selects just the A elements that are 
> within DIVs with a data attribute value equal to '1' and with a class of 
> '.rightarrow'?

If you know the entire data-* attribute names (data-goisbi, data-goed, 
data-gosbl, etc.), then:

var links = document.querySelectorAll('[data-goisbi="1"] 
.rightarrow,[data-goed="1"] .rightarrow,[data-gosbl="1"] .rightarrow');
console.log(links);

> 
> I've found the attribute selector but it "Selects elements based on the 
> value of the given attribute" so I can't put a part name for the attribute.
> 

You can't match an element using a partial attribute name. However, if 
you assume that all data-* attributes having a value of "1" will satisfy 
your needs, then:

var all = [...document.querySelectorAll('div .rightarrow')];
var links = all.filter(a => {
   let div = a.closest('div');
   return div && Object.values(div.dataset) == "1";
   });
console.dir(links);

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

Thread

selector for queryselectorAll Andrew Poulos <ap_prog@hotmail.com> - 2019-02-05 11:32 +1100
  Re: selector for queryselectorAll Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-02-05 03:26 +0100
    Re: selector for queryselectorAll Andrew Poulos <ap_prog@hotmail.com> - 2019-02-05 17:06 +1100
      Re: selector for queryselectorAll Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-02-05 16:51 +0100
        Re: selector for queryselectorAll Andrew Poulos <ap_prog@hotmail.com> - 2019-02-06 07:36 +1100
  Re: selector for queryselectorAll Mickey Finn <mfinney@gmail.com> - 2019-02-09 15:12 -0200

csiph-web