question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

I need to apply bounce property on both left and right well's using nth-child... I m not getting it.

See original GitHub issue

Challenge Target a Specific Child of an Element Using jQuery has an issue. User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36. Please describe how to reproduce this issue, and include links to screenshots if possible.

My code:


<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well");
    $("#target1").parent().css("background-color", "red");
    $("#right-well").children().css("color", "orange");
    $("#left-well:nth-child(1)").addClass("animated bounce");
  });
</script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
akorede12commented, Jul 19, 2016

how did you get it, I’m confused

1reaction
jpathancommented, Jul 9, 2016

Thank you so much…I got it

On Jul 9, 2016, at 1:45 PM, Abhisek Pattnaik notifications@github.com wrote:

@jpathan https://github.com/jpathan The Instruction

Make the second child in each of your well elements bounce. You must target the children of element with the target class.

i.e. you must target the target class and only select the 2nd of the target class.

Please verify with the community in https://gitter.im/FreeCodeCamp/Help room before filing an issue.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/FreeCodeCamp/FreeCodeCamp/issues/9641#issuecomment-231546399, or mute the thread https://github.com/notifications/unsubscribe/AMngZMgUwJ3KdbA-cn2ygn2odPf8LS0Kks5qT95HgaJpZM4JIomj.

Read more comments on GitHub >

github_iconTop Results From Across the Web

nth-child() - CSS: Cascading Style Sheets - MDN Web Docs
Note that, in the element:nth-child() syntax, the child count includes children of any element type; but it is considered a match only if ......
Read more >
How nth-child Works - CSS-Tricks
Using -n values seems a little weird, because if the end result is negative there is no match, so you'll need to add...
Read more >
Help understanding what nth-child is and what does it do?
Here's how you would give the third element in each well the bounce class: $(".target:nth-child(3)").addClass(“animated bounce”);
Read more >
Create advanced animations with smart animate
You can adjust opacity through a layer's Fill properties, as well as through the Layer property. Smart animate will apply to both.
Read more >
Docs • Svelte
It also provides all the other pieces you need to build a web application such ... With this, npm run build will generate...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found