Multiple selectors to exclude in querySelectorAll

Multiple selectors to exclude in querySelectorAll
0

#1

Below is label.

<label style="vertical-align: middle; cursor: pointer;">Terrain</label>

It is nested in following structure (see label at the end):

div.event-section div.googlemaps div#googleMap6512 div div.gm-style div.gmnoprint div.gm-style-mtc div div label

Problem:
I want to exclude this label in my Javascript together with the label from another div.widget_small and I tried this.

var arrInp = document.querySelectorAll("label:not(.googlemaps):not(.widget_small)");

This did not work. I think I picked the wrong selector or… ?


JQuery exclude label
#2

Do you have a link to your project? It would be helpful to see the actual html generated so we can test some ideas out.


#3

@randelldawson - Hi, sorry, I develop on my localhost:4000 only now.

How can I clarify my problem better?


#4

Can you copy/paste the rendered html which would have everything that is showing on the page?

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.


#5

@randelldawson - I simplified my question. Its problematic to post the whole code for this.
I hope my edit helps to clarify. Thanks on forehand.


#6

What is problematic about posting the html rendered? All you have to do is open the page which shows the map and then copy/paste all the source code into a reply.

Just remember to precede the code with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.


#7

@randelldawson - So sorry, but I tried to simplify my question in such a way that hopefully someone can help me. The question in itself and the code might be clear enough…


#8

That is fine. Maybe someone else can answer your question. I myself like to have the code to test various things out, just in case what you describe as the layout is not exactly what you think it is. I have been doing this for a while and when I only get theoretical structure, I end up giving responses which should work, but because the structure was ever so slightly different, I had to spend triple the amount of time going back and forth with the user.


#9

@randelldawson - Fair enough and I appreciate that. I myself just started developing since about a year and I try to keep things short, simple and easy. My above problem, in my modest opinion, is about me not being able to grab the correct selector. And second, not able to put a 2 X NOT label in the javascript exclusion. So more or less a syntax issue. Anyways, lets hope it gets resolved before Christmas, these little code mishaps are always the most nasty and annoying… :frowning:


#10
<div class="gm-style-mtc">
<label style="vertical-align: middle; cursor: pointer;">Hello</label>
</div>

I am trying to exclude above label in below code:

document.querySelectorAll("label:not(.label)");

How to exclude based on “label style” only?

Alternatively, the div for the label style is “.gm-style .gm-style-mtc label” (= CSS selector), but doing the following also did NOT work:

document.querySelectorAll("label:not(.gm-style .gm-style-mtc)");

#11

So your document.querySelectorAll("label:not(.label)"); says “select any label without the css class ‘label’ applied to it.” I don’t think that’s what you intend.

In your second example, you are saying “select any label without the class 'gm-style” or ‘gm-style-mtc’." Which doesn’t apply to the given label you want to exclude.

In short, you have no direct hook to this label. You could exclude a style, I think, like document.querySelectorAll(label:not([style="vertical-align:middle"]); but that may filter more than you intend…


#12

Your topic says jQuery but the examples you tried are in vanilla JavaScript. If you have the following elements:

<div class="gm-style gm-style-mtc label">do not select</div>
<div class="fun label">select</div>

Then, the following vanilla JS will select all elements with class “label” which do not have a “gm-
style” or “gm-style-mtc” class.

document.querySelectorAll(".label:not(.gm-style):not(.gm-style-mtc)");

As far as excluding the label below, it is a little more complicated.

<label style="vertical-align: middle; cursor: pointer;">Hello</label>

Using jQuery:

var selection = $('label').filter((_, elem) => {
  var exclude = 'vertical-align: middle; cursor: pointer;';
  return exclude !== elem.style.cssText;
});

Above, I target all label elements with the $(‘label’) part, but if there are tons of label elements, I would narrow it down to labels nested in specific element types or element with specific class names, so the filter runs faster. Basically, the code above looks for the label to have the exact inline style of " ‘vertical-align: middle; cursor: pointer;’ If it has it, then it will not be included in the final filter result.


#13

@snowmonkey - sorry for confusion, the label is found like this…

<div class="gm-style-mtc">
<label style="vertical-align: middle; cursor: pointer;">Hello</label>
</div>

You are right, with the style code in the filter, it filters a bit too much to my liking… )
How to exclude the label with .div reference then?


#14

Just to be clarify, will this div shown above possibly have other labels which you do not want to exclude? Also, are you trying to select the labels or the divs containing labels which do not have a label like the one above?


#15

are you trying to not select all labels within the .gm-style-mtc?

Yeah, what @randelldawson sez. :wink:


#16

@ronnie - You asked this or a similar question in a different thread four days ago and I could never get you to show all the html (with all the possible divs and labels). Only now am I seeing a single example of how the structure is really laid out (with actual html code). If you could have provided more information like this, I probably could have helped you before.

EDIT: I have now combined the two threads now.


#17

At a guess, try something like this:

let myEl = document.querySelectorAll(".gm-style-mtc :not(label)")

console.log(myEl);

Wait. That isn’t right either. I don’t think you’ll be able to select them that way. How about, instead, selecting all the labels, select the containers, then see if that container contains the label?

let myExclusiveEl = document.querySelectorAll(".gm-style-mtc");
let myEls = document.querySelectorAll("label");


myEls = [...myEls].filter(child => {
  let containedByExclusionNode = [...myExclusiveEl].filter(parent => {
    if (parent.contains(child)) {
      return true
    } else {
    return false;
    }
  })
  
  if (containedByExclusionNode.length > 0) {
    return true;
  } else {
    return false
  }
})

console.log(myEls);


#18

I think I need to ice my brain after that logic funfest.


#19

I tested your code and it still includes the following label element. I could be wrong (OP would need to correct me), but I thought the OP did not want to include the label because it has the specific style of “vertical-align: middle; cursor: pointer;”.

<div class="gm-style-mtc">
  <label style="vertical-align: middle; cursor: pointer;">Hello</label>
</div>

I could be way off and will not know for sure until @ronnie responds.


#20

@randelldawson - Hi Randell, nice to see you again… :slight_smile:
Yes, you are right, I want to exclude the specified label.

I am playing around a bit with @snowmonkey code, but no luck yet. I keep trying.

Thanks for your efforts @snowmonkey - dont run out of ice, there is more to come … :slight_smile: