Zclip Open only clicked class/copy from next element

Question

I've realized how bad i'm at JS/jQuery not having used it for decades.

I'm using jQuery Zclip to copy text from a list. But I found out that it first only works on one element per page. I found a solution using a different ID for every list item, but this will create a lot of unnecessary work in the future since there will be a ton of buttons.

What I need is a function that checks the span element AFTER the button element and take the content from that, rather from a specific ID. How can I achieve this through jquery?

Here's my HTML/JS

<li><span class="server-name">SERVER NAME</span>
    <br><button class="copy">COPY</button>IP:<span class="server-ip">127.0.0.1</span>
</li>

jquery

$(document).ready(function () {
    $('button.copy').zclip({
        path: 'scripts/ZeroClipboard.swf',
        copy: $('span.description').text()
  });

I hope you understand my question.

Answer 1

You need to use function with copy like

$('button.copy').zclip({
    path: 'scripts/ZeroClipboard.swf',
    copy: function() {
        return $(this).next('.server-ip').text(); //this here refers to element which invoked zclip
    }
});

You can go through source code

o.bind('zClip_copy',settings.copy);

Answer 2

I don´t know zclip, but you need to select text from next element behind button, so the fourth line should be:

copy: $(this).next('.server-ip').text()

Answer 3

Give your li a class (something like info:

<li class="info">
    <span class="server-name">SERVER NAME</span>
    <button class="copy">COPY</button>
    IP:<span class="server-ip">127.0.0.1</span>
</li>

And in your JS:

$(document).ready(function () {
    // loop through all `.info` elements
    $('.info').each(function () {
        // get the button
        var $button = $(this).find('.copy');

        // get the ip element
        var $ip = $(this).find('.server-ip');

        // make button zclip
        $button.zclip({
            path: 'scripts/ZeroClipboard.swf',

            // the text of ip
            copy: $ip.text()
        });
    });
});

Answer 4

Looks like copy parameter can be a function. If it is invoked (and looks like it is) in context of the current button, then the next code should work as you want:

$('button.copy').zclip({
    path: 'scripts/ZeroClipboard.swf',
    copy: function() {
        return $(this).next('.server-ip').text();
    }
});