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

Groups > comp.lang.javascript > #35971 > unrolled thread

selector for queryselectorAll

Back to article view | Back to comp.lang.javascript

Contents

  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

#35971 — selector for queryselectorAll

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'?

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.

Andrew Poulos

[toc] | [next] | [standalone]

#35972

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-goed="1">
>      <a class="downarrow" href="..">link</a>
> </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'?
> 
> 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.

Use *sensible* “data-” attribute names so that you can specify them in an
attribute selector.  If all else fails, use the comma operator to define a
ruleset that applies to all known relevant attribute names:

  [data-goisbi="1"] a,
  [data-goisbi="1"] a,
  [data-goed="1"] a
  {
     /* whatever */
  }

With that said, “data-” attributes should not be used for layout purposes;
Use the “class” attribute instead.

Also, your markup is not semantic, which is another bad idea.  See also:

<http://html5doctor.com/downloads/h5d-sectioning-flowchart.png>

Your question has little if anything to do with scripting.
Please keep on topic.

-- 
PointedEars

Twitter: @PointedEars2
Please do not cc me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#35973

On 5/02/2019 1:26 pm, Thomas 'PointedEars' Lahn wrote:
> 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-goed="1"> <a
>> class="downarrow" href="..">link</a> </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'?
>> 
>> 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.
> 
> Use *sensible* “data-” attribute names so that you can specify them
> in an attribute selector.  If all else fails, use the comma operator
> to define a ruleset that applies to all known relevant attribute
> names:
> 
> [data-goisbi="1"] a, [data-goisbi="1"] a, [data-goed="1"] a { /*
> whatever */ }

The names are actually acronyms eg. goisbi general options...

> With that said, “data-” attributes should not be used for layout
> purposes; Use the “class” attribute instead.
> 
> Also, your markup is not semantic, which is another bad idea.  See
> also:

Hmm, I'll updated the html accordingly

> <http://html5doctor.com/downloads/h5d-sectioning-flowchart.png>
> 
> Your question has little if anything to do with scripting. Please
> keep on topic.

I'm going to apply an "action" to each of the elements returned so
being able to create a selector for them is central to my scripting.
Anyhow, thanks for the feedback it's made me realise that I could/should
create an array of data attributes and create a selector(s) from that.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#35976

Andrew Poulos wrote:
> On 5/02/2019 1:26 pm, Thomas 'PointedEars' Lahn wrote:
>> Use *sensible* “data-” attribute names so that you can specify them
>> in an attribute selector.  If all else fails, use the comma operator
>> to define a ruleset that applies to all known relevant attribute
>> names:
>> [data-goisbi="1"] a, [data-goisbi="1"] a, [data-goed="1"] a { /*
>> whatever */ }
> 
> The names are actually acronyms eg. goisbi general options...

ACK.  (Note that in my hurry I wrote a duplicate selector above.)

>> <http://html5doctor.com/downloads/h5d-sectioning-flowchart.png>
>>
>> Your question has little if anything to do with scripting. Please
>> keep on topic.
> 
> I'm going to apply an "action" to each of the elements returned so
> being able to create a selector for them is central to my scripting.

ACK, sorry, I did not read the Subject carefully enough because I was
studying hard for exams and just needed a break from that; I should not have
replied at all at that time.   (However, it is a good idea to be specific in
the posting in addition to the Subject.)

Now that that’s done:

Again, you SHOULD use the “class” attribute value as a hook for applying an
"action", NOT “data-” attributes; that is not what they are for.  In the
class attribute, it is a good idea and recommended practice to distinguish
class names that merely serve as scripting hooks by using a prefix, e.g. “js-”.

<https://cssguidelin.es/#javascript-hooks>

> Anyhow, thanks for the feedback it's made me realise that I could/should
> create an array of data attributes and create a selector(s) from that.
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
You’re welcome, but what do you mean by that?

-- 
PointedEars

Twitter: @PointedEars2
Please do not cc me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#35981

On 6/02/2019 2:51 am, Thomas 'PointedEars' Lahn wrote:

> Again, you SHOULD use the “class” attribute value as a hook for applying an
> "action", NOT “data-” attributes; that is not what they are for.  In the
> class attribute, it is a good idea and recommended practice to distinguish
> class names that merely serve as scripting hooks by using a prefix, e.g. “js-”.

The data attributes already exist to store custom data so I would be 
adding classes just for the hooks. Is that a good idea?

> <https://cssguidelin.es/#javascript-hooks>

Oh man, it would've been good to have seen that before I started

>> Anyhow, thanks for the feedback it's made me realise that I could/should
>> create an array of data attributes and create a selector(s) from that.
>           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> You’re welcome, but what do you mean by that?

I'm going to maintain a list of attributes and create selectors from the 
list.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#36007

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);

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web