文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将移除元素恢复到jQuery中移除位置之前？

问如何将移除元素恢复到jQuery中移除位置之前？
EN

Stack Overflow用户

提问于 2015-07-03 13:19:07

回答 1查看 478关注 0票数 1

更少，所以我把我的代码放在这里：小提琴

用户可以选择段落和删除按下删除按钮。在此之后，将出现撤消按钮。我使用.append来恢复删除的段落，但它们附加在所有段落的末尾。

你有什么建议，将删除的元素恢复到自己的位置？

在HTML中，我在.lead类中工作：

        <div class="lead">

        </div>

在CSS i中，.selectedRow背景色发生了变化：

body{
    background: #e3e3e3;
}
.selectedRow{
    background-color: rgba(30,30,30,.3);
}

#jQueryBtnUndo, #jQueryBtnAdd, #jQueryBtnRemove{
    margin-right: 5px;
}

在jQuery中：

var undo;

var main = function(){
    $('.lead').append(
        $('<p>').text('New Paragraph'),
        $('<p>').text('New Paragraph'),
        $('<p>').text('New Paragraph'),
        $("<div class='btn btn-larg btn-primary' id='jQueryBtnAdd'>").text('Add'),
        $("<div class='btn btn-larg btn-primary' id='jQueryBtnRemove'>").text('Remove'),
        $("<div class='btn btn-larg btn-primary' id='jQueryBtnUndo'>").text('Undo')
        );
    $('#jQueryBtnUndo').hide();
}


$(document).on('click', '#jQueryBtnAdd', function(event) {
    event.preventDefault();
    $('.lead').append(
        $('<p>').text('New Paragraph')
        );
});

$(document).on('click', '#jQueryBtnRemove', function(event) {
    event.preventDefault();
        undo = $('.selectedRow').remove();
        undo.removeClass('selectedRow');
        console.log(undo);
        $('#jQueryBtnUndo').show('slow/400/fast', function() {

        });
});

$(document).on('click','#jQueryBtnUndo', function(event) {
    event.preventDefault();
        $('.lead').append(undo);
        $('#jQueryBtnUndo').hide('slow/400/fast', function() {

        });
});

$(document).on('click', '.lead p', function(event) {
    event.preventDefault();
    $(this).toggleClass('selectedRow');
});

$(document).ready(main);

javascript

jquery

html

css

回答 1

Stack Overflow用户

发布于 2015-07-03 13:45:07

如果show()/hide()是临时的，您可以简单地使用它。

但是，如果您只需要删除和追加，那么您可以将段落(索引)的位置存储为一个自包含的属性，并且可以在追加时检查它。

说这样的话：

function detach(para) {
    var parent = para.parentNode;
    for(var c=0; c<parent.childNodes.length; c++) {
       if(parent.childNodes[c] == para) {
          para.setAttribute("paraPosition", c);
          break;
       }
    }
    return para;
}
function attach(para) {
    var parent = document.getElementById("parentId");
    var position = para.getAttribute("paraPosition");
    var nextElement = parent.childNodes[position];//Next element would have taken this place.
    if(nextElement) {
        para.insertBefore(nextElement);
    }
    else {
        parent.appendChild(para);
    }
    return para;
}

但是，您可能会在这个分离和附加方法上遇到逻辑错误。这就是：

Say initially you 5 divs   [0,1,2,3,4];
You detach para "3"        [0,1,2,4];    //Now para "3" stores it position as 3.
You detach para "4"        [0,1,2];      //Now para "4" stores it position as 3.
Now you attach "3"         [0,1,2,3];
Now you attach "4"         [0,1,2,4,3];  // THIS HAPPENS AS YOU STORE "4"'s position as 3.

另一方面，Show/Hide更可靠。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31207833

复制

相似问题

问如何将移除元素恢复到jQuery中移除位置之前？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将移除元素恢复到jQuery中移除位置之前？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将移除元素恢复到jQuery中移除位置之前？
EN