如何動態刪除逗號並添加單詞並使用jQuery

Question

我正在使用jQuery UI的拖放功能，並在'放下'它將項目添加到<ul>元素與'，'後每個項目。對於最後需要的<li>我該如何動態刪除逗號並在該項之前添加單詞and？

我想：

$(#pot ul li:last-child).text().replace(/,/g, '');

但是，這給了我沒有運氣。

$(function() { 
    $(".flavours li").draggable({ 
     revert:true 
    }); 

    $("#pot ul").droppable({ 
     activeClass: "ui-state-default", 
     hoverClass: "ui-state-hover", 
     drop: function(event, ui, flavours) { 
      $("<li></li>").text(ui.draggable.text() + ',').appendTo(this); 
     } 
    }) 
}); 

Answer 1

爲了單獨的內容和表現，你可以這樣做在純CSS中，如果您不需要與IE8兼容：

#pot ul li:not(:last-child):after { 
    content:","; 
} 

Demonstration

更兼容的，你也可以做到這一點之後使用jQuery和相同的選擇：

$('ul li:not(:last-child)').append(','); 

，或者你可以定義使用jQuery類：

$('ul li').each(function(){ // this can be called each time you change the list 
    if ($(this).is(':last-child')) { 
    $(this).removeClass('notLast'); 
    } else { 
    $(this).addClass('notLast'); 
    } 
}); 

Demonstration

Answer 2

括在quotes選擇，你必須修改文本分配回到單元

$('#pot ul li:last-child').text($('#pot ul li:last-child').text().replace(/,/g, '')); 

或

el = $('#pot ul li:last-child'); 
el.text(el.text().replace(/,/g, 'and'));