CODEWITHSUNDEEP
javascriptjqueryarrays
scottM
scottM

Reputation: 468

Cloning an array?

I have a profiles page with a grid of photos that each have a pop-up link to a full bio description. Below each of the photos, wrapped in an h3 are the names of each individual on the profiles page. I'm trying to take the pop-up link from the image and add it to the name that's below the photo so that I can trigger the pop-up from the title as well as the profile photo.

The way the pop-up works is to have the anchor tag on top of the photo, so it's not wrapping the image. Instead it's made the same size as the image, and laid on top of it with CSS. So what I'm trying to do is just pull the anchor tag from the images and assign it to a <span> that wraps the name below the image.

To do this, I've added all the profile image link data to an array and managed to loop through the pop-up links and prepend them to the profile name. Here's the problem, now the image links no longer work.

In researching a fix for this I came across the clone() function which I thought would work, but apparently it doesn't work on arrays.

So I'm a bit lost on this one. Any thoughts on how I might resolve this? Any help would be greatly appreciated.

This is what I have so far:

(function($){
    var profileImgLink = $('.grve-item-url.grve-image-popup'),
        titleLink = $('h3.titleheader'),
        titleWrapper = titleLink.children('span'),
        attributes = profileImgLink.prop('attributes'),
        arr = profileImgLink.toArray();

        $.each(arr, function(index){

            titleWrapper.each(function(index){

                $(this).prepend(arr[index])

            });

        });

})(jQuery);

EDIT: Heretic Monkey provided a solution that fixed the problem. He pointed out that I could add the clone() method to the array variable I had set up, and that fixed the problem. so this question has been answered.

Upvotes: 0

Views: 83

Answers (1)

Issam KHALIL
Issam KHALIL

Reputation: 36

Try this:

(function($) {
    $('.grve-item-url.grve-image-popup').each(i, element){
        var $link = $(element);
        var $clonedLink = $link.clone();    
        $link.closest("h3.titleheader").children('span').prepend($clonedLink);
}})(jQuery);

Upvotes: 2

Related Questions