javascriptjqueryattributesclicksimulate

Selecting a div matching an attribute using JQuery is failing

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.

enter image description here

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.

Solution

  • 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.