3 variable target


#1

What did I do wrong?

$(document).ready(function() {

$target.fadeOut('fast');

});

var $target = $('li:nth-child(4)');


#2
$(document).ready(function() {
    $target.fadeOut('fast');
});

var $target = $('li:nth-child(4)');

is very nearly a solution except for one thing, the target elements do not exist yet in the DOM. The declaration is made at load time, not after a deferral period that allowed the elements to load.

Explanation:

When a page loads and a script element is parsed the script at the src URL will download and immediately begin running once downloaded. The only problem is that this is before the body element has been parsed, so there is no content present when the script runs. That is why we need deferral, and the purpose of $(document).ready();


#3

That is not to say that your code won't run, just that it won't run as expected if written in the head element. Were we to move script.js load to the end of the body element, we wouldn't need to defer, since all the content would have downloaded before the script.

<body>
<div id="page_stuff">

</div>
<script>
    var $target = $('ol li:nth-child(4)');
    $target.fadeOut('fast');
</script>
</body>

The script above is inline, but would be exactly the same if written in script.js, no .ready() method required. We invoke jQuery in the $target object definition. But even if the code you wrote were used, as is, it would still run as expected. Where we run script in the parsing in sequence is critical.


#12

still having problems with exercise 3 variables, here is my code :smile:

$(document).ready(function() {
$target.fadeOut('fast');
});

var $target = $('ol li:nth-child(4)');


#13

it keeps coming up with "Oops, try again. Did you target the 4th li child of the ordered list? Check the Hint if you need help."


#14

The above line is executing immediately, meaning the HTML is not fully loaded yet, so there is no element captured. Place the line above,

var $target = $('ol li:nth-child(4)');
$target.fadeOut('fast');

#15

thanks for your help, that worked thankyou.


#16

// Write your jQuery code on line 3!
$(document).ready(function() {
// create a class in html tab on (li 4) and store the value in var//
var $target = $('.li4')
$target.fadeOut('fast');

});

// I found to create class rather easy and straight forward then calling the nth: child//


#17

But when would you get any practice to hone your skills? Traversing the document tree is a very useful skill to develop and use.


#18

The example is wrong, here's what I discovered:

var $target = 'li:nth-child(4)';

$('document').ready(function() {
$($target).fadeOut();
});


#19

You need to include the variable definition inside the ready() handler, and it should be jQuery object, not just a CSS selector in quotes:

$('document').ready(function() {
    var $target = $('li:nth-child(4)');
    $target.fadeOut();  
});

Also, if the UL in the page happens to have four or more LI children, the fourth in that list will also be selected. The instructions ask for only the OL fourth LI, so we need to be a little more specific with the selector:

    $('ol li:nth-child(4)')

#20

A post was split to a new topic: Why variables?


#21

When I use
var target = 'ol li:nth-child(4)';
the fourth line disappears but when i click save it says "Oops, try again. Did you create the $target variable on line 3?"
When I use
var $target = $('ol li:nth-child(4)');
the line does not disappear at all but when I click save it goes to full screen and when I go back I see the message "Oops, try again. Did you target the 4th li child of the ordered list? Check the Hint if you need help."
I reallly do'nt know what else to do now


#22

Do you have this line following the above?

$target.fadeOut();

#23

yes I do have that line.


#24

Interesting thing. Since

var target = 'ol li:nth-child(4)';

was making the fourth line disappear i decided to stick with it and I just removed the ";" at the end and it worked.


#25

Be sure to make $target a jQuery object. The selector should have a function wrapper... $().

We can still work with your code, though.

$(target).fadeOut();

#26

The problem has been solved. I did all that. what worked is var target = 'ol li:nth-child(4)'
All the other stuff gave me error messages. Thanks for taking the time to help me. I appreciate it.


#27

mtf, should we always place the variables inside the function when working with jQuery then? Or is this only important when your waiting for the document to load? (so anytime you use .ready())

For example, if I wanted it to dissapear on mouseenter, can I put the variable outside of the function?


#28

jQuery is largely event driven, meaning listeners are bound to page elements. We cannot attach a listener if the element is not yet present, and once the command is given, there is no going back. That's the main purpose of deferral. Global variables can be set at the beginning of the load, and assuming they are not dependent upon any elements do not need to be deferred.

Until you have a good handle on the load sequence, and JavaScript in general, it would be advisable to keep everything inside the ready() handler. This way there is less chance things will be amiss.