How to make css change using jQuery find()?

Question

htmlCODE:

<body style="padding: 80px; z-index: -2">
  <div class="reaction" style="border-radius: 50%; background-color: blue; width: 40px; height:40px; z-index: 1">
    <div class="" style="position:absolute; border-radius: 50%; background-color: purple; width: 40px; height:40px; z-index: 0;"></div>
    <div class="circle" style="position:absolute; border-radius: 50%; background-color: skyblue; width: 40px; height:40px; z-index: 0"></div>
  </div>
</body>

Well working jQueryCODE:

$('.reaction').mousedown(function () {
  $(this).find('div').css('left', '70%');
});

This CODE seems to working well, but

Worse working jQueryCODE:

$('.reaction').mousedown(function () {
  $(this).find('div.circle').css('left', '70%');
});

This Worse CODE is also works but it make the size of div.circle to 0*0 from 40*40 in elements tap of browser developer tools. (style="left: 70%;" seems to be working well)

Why size of .circle goes 0 * 0 after Worse working jQueryCODE?

I don't see any errors in this fiddle

Core972
– Core972

2018-01-28 10:10:40 +00:00
Commented Jan 28, 2018 at 10:10 — Core972
– Core972, Commented Jan 28, 2018 at 10:10

Bhuwan · Accepted Answer · 2018-01-28 10:46:18Z

Both code are working fine. No worse code. The issue is

$(this).find('div').... It is targeting the both the div inside .reaction and thats why both the div getting left:70%

$(this).find('div.circle')...Its targeting to only div that has circle class.

Stack Snippet

$('.reaction').mousedown(function() {
  $(this).find('div').css('left', '70%');
  $(this).find('div.circle').css('left', '30%');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body style="padding: 80px; z-index: -2">
  <div class="reaction" style="border-radius: 50%; background-color: blue; width: 40px; height:40px; z-index: 1">
    <div class="" style="position:absolute; border-radius: 50%; background-color: purple; width: 40px; height:40px; z-index: 0;"></div>
    <div class="circle" style="position:absolute; border-radius: 50%; background-color: skyblue; width: 40px; height:40px; z-index: 0"></div>
  </div>
</body>

Collectives™ on Stack Overflow

How to make css change using jQuery find()?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related