Copy -data to other ul

Question

I have a ul with data attributes. Like this:

<ul class="carousel-creations">
    <li data-teaflavour="pear">
    </li>
    <li data-teaflavour="mint">
    </li>
    <li data-teaflavour="chai">
    </li>
    <li data-teaflavour="mint">
    </li>
    <li data-teaflavour="pear">
    </li>
    <li data-teaflavour="chai">
    </li>
</ul>

But my problem is. I want to copy the data atributs to other ul. This is my second ul.

<ul class="controlNav">
    <li><a rel="0" title="" class=""></a><span class="hover"></span></li>
    <li><a rel="1" title="" class=""></a><span class="hover"></span></li>
    <li><a rel="2" title="" class=""></a><span class="hover"></span></li>
    <li><a rel="3" title="" class="active"></a><span class="hover"></span></li>
    <li><a rel="4" title="" class=""></a><span class="hover"></span></li>
    <li><a rel="5" title="" class=""></a><span class="hover"></span></li>
</ul>

I want that the data attribuuts of the first ul. Are copy to the ul controlNav. Do you understand my bad english? (A) I want to copy the data attribute to the second ul. So that all items of the second ul li. The data attributes getting the first ul.

Answer 1

You can iterate over the list items with each(), and use the supplied index argument to locate the appropriate item in the other list:

var $sourceItems = $("ul.carousel-creations li");
$("ul.controlNav li").each(function(index) {
    $(this).attr("data-teaflavour",
        $sourceItems.eq(index).attr("data-teaflavour"));
});

Answer 2

You could use jquery's .clone() method.