使用jquery创建以逗号分隔的单击元素列表

我正在尝试将逗号分隔列表注入DOM,用户可以将其复制并粘贴到另一个应用程序中.现在我完全坚持如何处理第一个没有逗号的元素.

现在用户点击一个元素,jquery抓取元素的ID来构建列表.用户应该能够打开和关闭他们的选择.我还需要按用户选择项目的顺序生成列表.

HTML

Comma separated list here: <span id="list"></span>
<br />
<a id="1" class="clickme" href="#"><li>One</li></a>
<a id="2" class="clickme" href="#"><li>Two</li></a>
<a id="3" class="clickme" href="#"><li>Three</li></a>
<a id="4" class="clickme" href="#"><li>Four</li></a>
<a id="5" class="clickme" href="#"><li>Five</li></a>
<a id="6" class="clickme" href="#"><li>Six</li></a>

CSS

.selected {
    background-color: #99CCFF;    
}

JS – jquery已加载

$('.clickme').click(function (e) {
        e.preventDefault();
        var book_id = $(this).attr('id'); 
        $(this).children('li').toggleClass("selected");
        var list_container = $("#list");
        if ($(this).children('li').is(".selected")) {
            if (list_container.text().length > 0) {
                list_container.append("," + book_id);
            } else {
                list_container.append(book_id);
            }
        } else {
            list_container.text(list_container.text().replace("," + book_id,""));          
        }
});

这对于构建逗号分隔列表非常有用,并且可以切换除列表中的第一个值之外的所有值.问题是插入的第一个值没有前面的逗号,因此替换函数无法匹配.如果我从替换函数中删除逗号,那么我会留下一堆不需要的逗号.如果我匹配两者,那么我冒着匹配ID的一部分的风险…即当3被切换时替换13中的3.

我尝试了很多变化,找不到有用的东西.

我唯一能够产生预期结果的解决方案是使用CSS来注入逗号并使用span元素包装注入的ID.

CSS TRICK

#list span { display: inline; }
#list span:after { content: ","; }
#list span:last-child:after { content: ""; }

工作得很好……除了这个的实际目的.我需要用户能够复制和粘贴生成的字符串.当您使用CSS生成内容时,大多数浏览器中的DOM级剪贴板都看不到它. IE在浏览器中看到它复制了字符串,FF和Safari都复制了字符串而没有附加CSS的逗号.

Fiddle is HERE

$('.clickme').click(function (e) {
    e.preventDefault();
    $(this).children('li').toggleClass("selected");

    var list_container = $("#list");
    var book_ids = $('.clickme:has(li.selected)').map(function(){
        return this.id;
    }).get();

    list_container.text(book_ids.join(','));
});

var book_ids = [];
$('.clickme').click(function (e) {
    e.preventDefault();
    $(this).children('li').toggleClass("selected");

    var list_container = $("#list");

    var index = $.inArray(this.id,book_ids);
    if(index === -1){
        // Not in array,add it
        book_ids.push(this.id);
    }
    else{
        // In the array,remove it
        book_ids.splice(index,1);
    }

    list_container.text(book_ids.join(','));
});