2

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);
        }
    })
});
4

2 に答える 2

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'));
于 2013-03-11T17:35:06.853 に答える
1

コンテンツとプレゼンテーションを分離するために、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'); 
  }
});

デモンストレーション

于 2013-03-11T17:41:27.263 に答える