-2

I have a div class which is essentially a button that I'm trying to click using jQuery

<div class="tool-button refresh-button icon-tool-button" title="Refresh"><div class="button-outer"><span class="button-inner"><i class="fa fa-refresh text-blue"></i> </span></div></div>

Here is what I tried but the log confirms the length is 0 thus not selected, any suggestions?:

console.log($('.div.tool-button .refresh-button icon-tool-button:first'))

console.log($('.div.tool-button .refresh-button icon-tool-button'))
rahulchawla
  • 170
  • 1
  • 3
  • 20

3 Answers3

0

You had multiple problems with the selector.

  1. Remove . before div since its a tag not a class.
  2. Remove the spaces between the classes, when there is space between them jquery is looking for element thats a child to the previous selector.

console.log($('div.tool-button.refresh-button.icon-tool-button:first').length);

console.log($('div.tool-button.refresh-button.icon-tool-button').length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tool-button refresh-button icon-tool-button" title="Refresh">

</div>
Lundstromski
  • 1,197
  • 2
  • 8
  • 17
-1

You can use click() method

const btn = $(".tool-button.refresh-button.icon-tool-button");
btn.click();

Do you want to select first element?

const btn = $(".tool-button.refresh-button.icon-tool-button")[0];
btn.click();
Ali Yaghoubi
  • 1,258
  • 8
  • 15
-1

In your solutions, you trying to get:

<div class="tool-button">
  <div class="refresh-button">
    <div class="icon-tool-button"> // this
    </div>
  </div>
</div>

If you delete spaces on string, you can access your element.

The solution is

$(".tool-button.refresh-button.icon-tool-button")

Chaining selectors will query for elements that contain all of the selectors.

Detailed answer: https://stackoverflow.com/a/59406548/11969749

Corey
  • 1,010
  • 9
  • 17
phibershinigami
  • 50
  • 7