jQuery - Target a Specific Child of an Element Using jQuery

JavaScript
1

Tell us what’s happening:
the issue is that when I use the solution it doesn’t work but it’s the same as yours. why?

Your code so far

<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");

  });
    $(".target:nth-child(2)").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>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15

Challenge: jQuery - Target a Specific Child of an Element Using jQuery

Link to the challenge:

2

it should go inside of this }); Hope this helps…

3

$(“.target:nth-child(2)”).addClass(“animated bounce”); this is exactly what I have, and the same layout but not working.

4

did you put it inside the function?

5

As said, your code needs to be inside the callback function that runs when the document is ready.

$(document).ready(function() {
 /* inside the callback */
});

Technically, your code as it is now, would work if you put the script element after the HTML. However, the tests would not pass as your code is expected to be inside the ready method callback function.

Edit: The point of the ready method is to wait for the DOM to be “ready” (document loaded) before it runs the code that will interact with the DOM (the code inside the callback).

Some pseudo-ish code:

class jQuery {
  constructor(selector) {
    this.element =
      typeof selector === "string"
        ? document.querySelector(selector)
        : selector;
    return this;
  }

  ready(callback) {
    /* some proper logic to check the DOM is needed here */
    let DOMready = this.element;
    if (DOMready) {
      callback();
      return this;
    }
  }
}

new jQuery(document).ready(function () {
  console.log("document is ready");
  console.log("Inside the ready callback function");
});
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.