当删除元素时,然后重新定位/动画每个下一个元素jQuery

时间:2014-03-23 04:28:54

标签: javascript jquery html css

实际上我有动态通知“.noti”,而且都有

 position:fixed;
 bottom:0;
 width:250px;
 right://adjusted via jQuery bcz they are dynamically added

 var s = $('body').find('.noti').size();
 xxxxx.css({right:s*250});

现在我要做的是,当我删除一个元素时,每个下一个元素必须重新定位/调整它们的“right:xxx”属性。

例如我有5个div:

 |_ _ _ _ _|

我删除了最右边的div

 |_ _ _ _  |

然后所有其他div必须重新定位为

 |  _ _ _ _|

我试过“.next”:

 var next = $(this).closest('.noti').next('.noti');
 if(next.length > 0){
   var nextright = next.css('right');
   nextright = nextright.split('px').join('');
   next.animate({right:nextright-250},300);
 }

但它只会重新定位下一个div。

有人可以告诉我,如何使用“.each()”或“.nextAll()”或“for循环”来重新定位所有下一个元素。

谢谢&问候

更新:

现在我试过了:

 var parent = $(this).closest('.noti'),next = parent.next('.noti');
 var df = parent.attr('data-for');
 if(next.length > 0){
   $('.noti').each(function(){
     if(df != $(this).attr('data-for')){
       var t=$(this),pos = t.css('right');
       pos = pos.split('px').join('');
       t.animate({right:pos-250});
     }
   });
 }

只有当我想删除最合适的元素时才能正常工作。但如果我从中间删除任何元素,那么每个“.noti”都会重新定位他们的“正确”属性。但我希望只有“nextAll”元素必须重新定位。

更新:解决方案

最后解决了这个问题{解决方案基于Tandon的回答} http://jsfiddle.net/7f2aU/5/

由于

1 个答案:

答案 0 :(得分:0)

DEMO 点击div将其删除

var width = $('#container div').width();

$('#container div').each(function(index){
    // set css property `right` to the width * index (zero-based) + 30 (random number)
    $(this).css("right", ((width * index) + 30));

});

$("#container div").click(function(){
    var thisIndex = $(this).index();  // current element's index
    // console.log(thisIndex); a check

    $(this).siblings("div").each(function(index){ 

        // to make sure the element `$(this)` (the sibling) is to the left of the element clicked on 
        if((index + 1) > thisIndex){

            var css = parseInt($(this).css("right"), 10); // parse the property

            $(this).css("right", css - width); // set it shifted to right by an offset equal to width
            // console.log($(this).css("right")); a check
        }
    });

    $(this).remove(); // finally, remove it
});