Question

I am using this jquery script to duplicate the first element inside a <div> with class scoll-box:

$(".scroll-box > *").first().clone().appendTo(".scroll-box");

I’d like to rewrite the appendTo() portion of the script to use a $(this).parent specification so the script can be run on multiple instances of the .scroll-box element. How would I do this?

The original HTML looks like this:

<div id="scroll-box" class="scroll-box">
    <div>Line 1</div>
    <div>Line 2</div>
    <div>Line 3</div>
</div>

Answer 1

To refer to a different element each time, the best thing to do is .each, in which this is one of the set of elements each time:

// for each .scroll-box
$(".scroll-box").each(function() {
    // clone first child and append to this .scoll-box
    $(this).children().first().clone().appendTo(this);
});

.parent() is not necessary this way, since this refers to a .scoll-box element.