CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Philipp Nies
Philipp Nies

Reputation: 969

jQuery modify element children

My Bootstrap list has on each item a "add" button. After click on add, I modify the item and add it to another list-group.

But if I modify the button-element nothing happens. I dont know why, I tried out a lot of methods, but nothing works.

This is the default item:

<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>

This is what I want:

<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>

The ".item-add" jQ function:

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

If I use console.log($(elem).children(':eq(last)')); it display the <button> element, but nothing change.

Upvotes: 2

Views: 68

Answers (3)

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

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

last is the JavaScript variable.So,it should be concate it with string

Upvotes: 0

Greg
Greg

Reputation: 826

I did a JsFiddle for you, see here https://jsfiddle.net/tnya6b1e/

With this 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'); 
    }

});

Upvotes: 1

amanuel2
amanuel2

Reputation: 4646

It should be more like this:

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

Instead of this:

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

Because you have to concatinate it, to make it look like a string. Since last is javasccript. So now it the button will actually change.

Upvotes: 1

Related Questions