如何使用jQuery追加元素及其所有子元素以及父类和子元素的所有类

时间:2012-12-11 14:56:23

标签: javascript jquery

我有一个成功删除元素并将其作为成功附加到页面上其他位置的函数。问题是,只要文档准备好,jQuery就会向移动的子节点添加类和属性。我需要在删除和追加后保留这些类和属性。我已经考虑过调用添加类的原始函数,但问题是它们是基于键的,并且在移动之前依赖于它们的位置,在更改键之后调用它,因此将添加全新的和不同的类。

添加jQuery的类非常标准:

$(function(){
    $("div").each(function(key){
        if ($(this).hasClass("container")){
            $(this).find("ul").addClass("parent" + key);
            $(this).find(".container-item").attr("parentClass", ".parent" + key);
        };
    });
});

删除/追加功能:

function copy_item(draggable, target){
    var account = clone_items(draggable);
    //$('#'+name.uid).remove();
    $('#'+name.uid).hide();
    target.append(make_div(name, true, true));
    //$(draggable).children().attr("class", ($(draggable).children().attr("class")));
}
function make_div(name, drag, drop){
    var newdiv = document.createElement('div');
    newdiv.setAttribute('id', name.uid);
    newdiv.appendChild(make_h3(name.username));
    ul = document.createElement('ul');
    ul.setAttribute("class", "domain_list");
    newdiv.appendChild(ul);
    for (j = 0; j < name.domains.length; ++j) { 
        ul.appendChild(make_li(name.domains[j], drag));
    }
    return newdiv;
}

HTMl的最终结果基本上是:

<div class="container">
    <ul class="parent0">
        <li parentClass="parent0">
        <li parentClass="parent0">

重新创建此结构时,我需要保持类“parent0”和parentClass属性不变。上面你可以看到我试图隐藏元素,确保它仍然保持一个具有正确的类/属性的有效元素,但最终仍然无法解决。理想情况下,我可以完全删除元素并使用正确的类重新创建它。

1 个答案:

答案 0 :(得分:1)

如果我对你要做的事情的理解是正确的,你不需要.remove()并重新创建元素以便移动它。你可以这样做:

function copy_item(draggable, target) {
    // not sure what this variable is for 
    // as you don't seem to be using it?
    var account = clone_items(draggable);

    // ...however, appending an existing 
    // element to another will 'move' it
    // and preserve all of it's properties
    target.append($('#' + name.uid));
}