CODEWITHSUNDEEP
javascriptjqueryhtml
JoakimB
JoakimB

Reputation: 167

Clone each, append to each

Problem: How do I clone each image from a list and "paste" them into another list?

I have searched but haven't found any solution close enough for my solution.

Short brief: I am creating a slideshow with thumbnails (jQuery-library: Slippry Slider). I want the thumbnails to work dynamicly, depending on the amount of slides.

So first I have some HTML containing the slides:

<ul id="thumbnails">
<li>
    <a href="#slide1">
        <img src="img/image-1.jpg" alt="This is caption 1">
    </a>
</li>
<li>
    <a href="#slide2">
        <img src="img/image-2.jpg"  alt="This is caption 2">
    </a>
</li>
<li>
    <a href="#slide3">
        <img src="img/image-4.jpg" alt="And this is some very long caption for slide 4.">
    </a>
</li>

Now I want to create wrapping elements for my thumbnails, first a div and then a ul-element:

// Create thumb-wrapping-elements
$('.demo_wrapper').append('<div class="thumb-box"></div>');
$('.thumb-box').append('<ul class="thumbs"></ul>');

And I want to check how many slides there is in the HTML above:

// How many thumbs? Check how many slides there is.
var count = $("#thumbnails li").length;

Create right numbers of li-elements and set the right width and values:

// Loop through and create li-elements and links
for (var thumbcounter = 0; thumbcounter < count; thumbcounter++) {

// Whats the width of each thumb?
var thumbwidth = (100/count) + '%';

thumburl = thumbcounter + 1;
$('.thumbs').append('<li><a href="#' + thumburl + '" data-slide="' + thumburl + '" style="width:' + thumbwidth + ';">

Here I would like to loop through each slide img from ul#thumbnails li a above and print them here. How the heck do I do that? :)

</a></li>');
};

See all code here: http://jborg.se/dev/slippry/demo/test.html

Now "a" is inside each a-element, just to make them visible.

Edit:

Made width of thumb more effective, thanks to answer below.

This is what I would like as output by the jQuery loop above (Right now I have everything right, except the images - which I do not know how to copy from the HTML and print here as each thumbnail):

<div class="thumb-box">
            <ul class="thumbs">
                <li>
                    <a href="#1" data-slide="1">
                        <img src="img/image-1.jpg" alt="This is caption 1">
                    </a>
                </li>
                <li>
                    <a href="#2" data-slide="2">
                        <img src="img/image-2.jpg"  alt="This is caption 2">
                    </a>
                </li>
                <li>
                    <a href="#4" data-slide="3">
                        <img src="img/image-4.jpg" alt="And this is some very long caption for slide 4.">
                    </a>
                </li>
            </ul>
        </div>

Upvotes: 2

Views: 514

Answers (2)

deleted
deleted

Reputation: 782

Try

// exported and edited the thumbwidth var for efficiency
var thumbwidth = (100/count) + '%';

// Loop through and create li-elements and links
for (var x = 0; x < count; x++) {    
    var imgEl = $('#thumbnails').find('img').eq(x).prop('outerHTML');
    $('.thumbs').append('<li><a href=\"#' + (x+1) + '\" data-slide=\"' + (x+1) + '\" style=\"width:' + thumbwidth + ';\">'+ imgEl + '</a></li>');   
}

PS- Sorry for no explanation and the mess, I'm on an iPad.

Upvotes: 1

indubitablee
indubitablee

Reputation: 8206

something like this?

$(document).ready(function() {
    var html = '<div class="thumb-box"><ul class="thumbs"></ul></div>';
    $('.demo').append(html);    

    var count = $("#thumbnails li").length;
    var width = (100.00/count) + '%';   
    var counter = 0;
    $('#thumbnails li').each(function() {
        counter++;
        var newItem = '<li>';
        newItem += '<a href= "' + $(this).find('a').attr('href') + '" ';
        newItem += 'data-slide="' + counter + '">';
        newItem += '<img src="' + $(this).find('img').attr('src') + '" alt="' + $(this).find('img').attr('alt') + '"/>';
        newItem += '</a></li>';
            
        $('ul.thumbs').append(newItem);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
ORIGINAL<br/>
<ul id="thumbnails">
    <li>
        <a href="#1" data-slide="1">
            <img src="img/image-1.jpg" alt="This is caption 1"/>
        </a>
    </li>
    <li>
        <a href="#2" data-slide="2">
            <img src="img/image-2.jpg"  alt="This is caption 2"/>
        </a>
    </li>
    <li>
        <a href="#4" data-slide="3">
            <img src="img/image-4.jpg" alt="And this is some very long caption for slide 4."/>
        </a>
    </li>
</ul>
<br/>
DEMO
<div class="demo">
</div>

Upvotes: 1

Related Questions