Selecting a div matching an attribute using JQuery is failing

Question

I go to https://www.tradingview.com/chart/?symbol=BINANCE:BTCUSDTPERP and press OPT+g (ALT+g for non-mac) and a TimeRange overlay appears.

I'm trying to simulate clicking on the 'Custom range' tab using JavaScript from the console.

But $('#overlap-manager-root > div > [attribute="CustomRange"]') fails to retrieve it.

This is odd to me because $('#overlap-manager-root > div button') successfully picks out the 2 buttons.

I'm using https://api.jquery.com/attribute-equals-selector/ for reference.

Answer 1

The > combinator is for direct descendants. This means the element after the > needs to be in the parent element (the element named before >) directly and not in some child element.

For example, #overlap-manager-root > div > [data-value="CustomRange"] would match

<div id="overlap-manager-root">
   <div>
       <button data-value="CustomRange"></button>
   </div>
</div>

But would not match

<div id="overlap-manager-root">
   <div>
       <div id="someotherdiv">
          <button data-value="CustomRange"></button>
       </div>
   </div>
</div>

Removing the > will make it look for any element within the subhierarchy and not just the direct children.

So switch the selector to

#overlap-manager-root > div [data-value="CustomRange"]

and this should find your element.