jQuery要素の子を変更する

Question

My Bootstrapリストには、各項目に「追加」ボタンがあります。追加をクリックすると、アイテムを変更して別のリストグループに追加します。

ボタンの要素を変更しても何も起こりません。私はなぜ、私は多くの方法を試してみたが、何も動作しません。

これはデフォルトのアイテムです：

<div class="list-group-item" data-id="399"> 
    <div class="input-group input-group-sm"> 
     <span class="input-group-addon" style="width:100%">Item-Name</span> 
     <div class="input-group-btn"> 
     <button type="button" class="btn btn-success item-add">+</button> 
     </div> 
    </div> 
</div> 

これは私が欲しいものです：

<div class="list-group-item" data-id="399"> 
    <div class="input-group input-group-sm"> 
     <span class="input-group-addon" style="width:100%">Item-Name</span>  
     <input class="form-control" placeholder=" Suchbegriffe" value="" style="min-width:150px;" type="text"> 
     <div class="input-group-btn"> 
     <button type="button" class="btn btn-success item-remove">x</button> 
     </div> 
    </div> 
</div> 

".item-追加" jQの機能：

var elem = $(this).parent().parent(); 

$(elem).children(':eq(last)').removeClass('btn-success').addClass('btn-danger');  
$(elem).children(':eq(0)').after('<input type="text" class="form-control" placeholder=" Suchbegriffe" value="' + $('#parameters').val() + '" style="min-width:150px;">'); 
$(elem).children(':eq(0)').html($(elem).children(':eq(0)').html().substr(0, 15) + '...'); 

elem = $(elem).parent(); 

$('#item-list-search').append(elem); 

私が使用している場合console.log($(elem).children(':eq(last)'));には<button>要素が表示されますが、変更はありません。

Answer 1

とそれconcateする必要があります：この代わりの

$(elem).children(':eq('+last+')').removeClass('btn-success').addClass('btn-danger'); 

：

$(elem).children(':eq(last)').removeClass('btn-success').addClass('btn-danger'); 

あなたはそれを縮めて文字列のようにする必要があるからです。最後はjavasccriptなのでこれでボタンが実際に変更されます。

Answer 2

$(elem).children(':eq('+last+')').removeClass('btn-success').addClass('btn-danger'); 

lastはJavaScript variable.Soあり、よりこのようにする必要があり、文字列

Answer 3

私はこれでここhttps://jsfiddle.net/tnya6b1e/

を参照してください、あなたのためのJsFiddleをしたが、JS：

$('.item-add').click(function() { 
    if (!($('#newitem').length > 0)) { 
     $('.item-add').parents('.input-group-btn').prepend('<input id="newitem" type="text" class="form-control" placeholder=" Suchbegriffe" value="' + $('#parameters').val() + '" style="min-width:150px;">'); 
     $(this).removeClass('btn-success').addClass('btn-danger'); 
    } 

});