开发者

Adding link after remove in last child

I want append link add in last child of class:(('.' + change_class + ':last .adda .mediumCell:first')) after remove, but if you remove last chil (44444444444444444444), it not append in last child mean 3333333333333333333 and remove with same row, how can fix it?

Example from my code: http://jsfiddle.net/LX49c/1/

$('.remove').live('click',function (e) {
    e.preventDefault();

    var change_class = $(this).closest('.find_input').find('div').attr('class').split(" ")[0];
    var url = $(this).closest('.find_input').find('div').attr('class').split(" ")[1];
    var get_class = $(this).closest('.' + change_c开发者_如何学运维lass).attr('id');
            $('#' + get_class).fadeOut('slow', function () {
                $(this).remove();
            });
            $('.' + change_class + ':last .adda .mediumCell:first').append('<a href="" class="add_input">add</a>'); 
});


Move the append(...) to within the .fadeOut function. See http://jsfiddle.net/LX49c/2/

$('.remove').live('click',function (e) {
    e.preventDefault();

    var change_class = $(this).closest('.find_input').find('div').attr('class').split(" ")[0];
    var url = $(this).closest('.find_input').find('div').attr('class').split(" ")[1];
    var get_class = $(this).closest('.' + change_class).attr('id');
            $('#' + get_class).fadeOut('slow', function () {
                $(this).remove();
                $('.' + change_class + ':last .adda .mediumCell:first').append('<a href="" class="add_input">add</a>');
            });
            //Moved from here
});

An alternative method is to remove the class before appending: http://jsfiddle.net/LX49c/4/

....
var get_class = $(this).closest('.' + change_class).attr('id');
        $('#' + get_class).fadeOut('slow', function () {
            $(this).remove();
        });
        $("#" + get_class).removeClass(change_class);
        $('.' + change_class + ':last(-1) .adda .mediumCell:first').append('<a href="" class="add_input">add</a>'); 


You're doing multiple expensive JQuery calls. I'd suggest replacing the following code:

var change_class = $(this).closest('.find_input').find('div').attr('class').split(" ")[0];
var url = $(this).closest('.find_input').find('div').attr('class').split(" ")[1];
//Replace the previous by:
var className = $(this).closest('.find_input').find('div').attr('class').split(" ");
var change_class = className[0];
var url = className[1];


You are appending the link before the remove. You are starting an animation that will remove the element when it's done, but the animation won't start until you exit the function.

If you want to append after the remove, you have to put that code in the event handler that is executed after the animation is done:

$('.remove').live('click',function (e) {
  e.preventDefault();

  var change_class = $(this).closest('.find_input').find('div').attr('class').split(" ")[0];
  var url = $(this).closest('.find_input').find('div').attr('class').split(" ")[1];
  var get_class = $(this).closest('.' + change_class).attr('id');
  $('#' + get_class).fadeOut('slow', function () {
    $(this).remove();
    $('.' + change_class + ':last .adda .mediumCell:first').append('<a href="" class="add_input">add</a>'); 
  });
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜