Question

Turns out jQuery’s “implicit looping” goes both way:

    <div class="classOne">
        some content
    </div>

    <div class="classOne">
        some content 2
    </div>  

[...]

$(function() { $('hello world').prependTo($('.classOne')); })

in this case, the loop will happen at the $('.classOne') section — hello world will be added to both Divs.

I also tried

    <div class="classOne">
        some content
    </div>

    <div class="classOne">
        some content 2
    </div>  

    <div class="classTwo">
        <a href="http://www.google.com">hello Google</a>
    </div>

    <div class="classTwo">
        <a href="http://www.yahoo.com">hello Yahoo</a>
    </div>  

[...]

$(function() { $('.classTwo').prependTo($('.classOne')); })

and there will be “nested loops”… so the 2 links will be added to both Divs

so i think if we have

$('.classOne').prepend($('.classTwo')).prepend($('.classThree'))

then it will be like 3 nested loops? Is there a rule to the nesting, and which one is the inner loop and which one is the outer loop? And what is the inner loop / outer loop if it is

$('.classOne').prependTo($('.classTwo')).prependTo($('.classThree'))

?

Answer 1

Each predecessor to the .prependTo() will be appended to each item passed to the in, you can see the actual jQuery core code here. Since you’re passing a jQuery object to the .prependTo(), it’ll look through each of those elements and add a cloned version of each object in the chain preceeding the prepend.

So each .prependTo() = one for loop (when passing a jQuery object in), but they’re not nested. The results of one are just passed to the next, but it’s an array that gets gets elements pushed on it, you can use .end() to return to the previous array for example.

I apologize if that’s not a crystal clear explanation, I realize it’s a bit weird t think about with the chaining…but if you can specify any questions this leaves in comments I’ll try and update to address any confusion/part-I-missed specifically.