javascript - 如何动态删除逗号并添加单词并使用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

将选择器包含在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'));

Answer 2

为了分离内容和表示，如果您不需要与 IE8 兼容，您可以在纯 CSS 中完成：

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

示范

为了更加兼容，您也可以在之后使用 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'); 
  }
});

示范