how does this line of code works in jquery?

Question

I've some second thoughts and I'm a bit confused on this code: this line of code is the one that I'm wondering about :

var items = $("#" + element[0].id + " li");

Now my question is: how does this line of code work? so where is the magic here? is it populating the items-array?

Thanks by the way!

Is it jquery doing this in one move when we target the < ul > - element? (with this code:

 $(document).ready(function() {
            $("#slider").mySlider({
                timeOut: 4000,
                captionOpacity: .7            
            });

here is some part of the code, the part that I'm wondering about: let's say u have this html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script src="js/mySlider.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#slider").mySlider({
            timeOut: 4000,
            captionOpacity: .7            
        });
    });
</script>
<title></title>
</head>
<body>

    <ul id="slider">
        <li>
            <img src="img/image1.jpg" alt="" />
            <div class="top">
                Some nice text captions..
            </div>
        </li>
        <li>
            <img src="img/image2.jpg" alt="" />
            <div class="bottom">
                Some nice text captions..
            </div>
        </li>

    </ul>

</body>
</html>

and here the JS:

  $.fn.mySlider   = function(vars) {

        var timeOut     = vars.timeOut || 4000;
        var capOpacity  = vars.captionOpacity || .7;
        var element     = this;
        var fxDuration  = timeOut/6;

        var items       = $("#" + element[0].id + " li"); //how do add the < li > items inside this array?
        var captions    = $("#" + element[0].id + " li div");
       // console.log(items);
        items.css('display','none');

        captions.css({
            'opacity': capOpacity,
            'display': 'none'
        });

score 0 · Accepted Answer · answered Sep 16 '13 at 14:32

0

If you want the "children" of your LI elements you can use:

var items = $("#" + element[0].id + " li").children();

jQuery Documentation on .children(optFilter)

With the filter, you can optionally specify that you want only the DIVs or As.

e.g.

$("#" + element[0].id + " li").children("div");//just the <div>s
$("#" + element[0].id + " li").children("a");//just the <a>s

answered Sep 16 '13 at 14:32

scunliffe

62,582
25
126
161

hit there...Im wondering something else: how jquery populate this array? Does Jquery do it with this line: var items = $("#" + element[0].id + " li")? where is the for-loop or the way jquery works to do this? thanks – YoniGeek Sep 16 '13 at 14:35
Correct... the line loosely translates to: "set the variable `items` to be equal to a special jQuery set of all `li` elements that are children (of any depth) of the element with the `id` {whateverYouvePassedIn}". – scunliffe Sep 16 '13 at 14:37
wow wow so u dont need any for-loop to populate 'var items' uhn? it does it just writing this line of code: var items = $("#" + element[0].id + " li");? and why u write element[0] which is the first item? it should be a variable inside? no? – YoniGeek Sep 16 '13 at 14:39
1

Correct... a jQuery selector can return a set of `0`, `1`, or `N` elements that match the selector you provided. From there you can do whatever you want. You can "chain" another method e.g. `$("#myId li").hide();` or you can chain the `.each(handler)` method to iterate over the set or you can even extract the actual DOM elements out. – scunliffe Sep 16 '13 at 14:43
one more thing: and why do we write a cero inside the brackets ( $("#" + element[0].id ) and not another nummer? thanks for yr time btw! – YoniGeek Sep 16 '13 at 14:54
never mind! I think I got the point: http://stackoverflow.com/questions/1051782/jquery-this-vs-this thanks – YoniGeek Sep 16 '13 at 15:10

how does this line of code works in jquery?

1 Answers1