Как добавить элемент, все его дочерние элементы и все классы родительского и дочернего элементов с помощью jQuery

Question 1

У меня есть функция, успешно удаляющая элемент и добавляющая его в другом месте страницы как успешная. Проблема в том, что как только документ готов, 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 оставались нетронутыми. Выше вы можете видеть, что я пытался скрыть элемент, убедившись, что он по-прежнему остается действительным элементом с правильными классами / атрибутами, но в конце концов это все равно не сработало. В идеале я мог бы полностью удалить элемент и воссоздать его с правильными классами.

javascript jquery

1

o_O 11 Дек 2012 в 18:56

Можно ли создать JSFiddle этого?

–

Kaizen Programmer

11 Дек 2012 в 18:58

В вашем образце кода много бессмысленных ссылок, которые затрудняют оценку того, что вы делаете неправильно. Что такое clone_items? То же самое с make_li и make_h3. Откуда появляется name изнутри copy_items и какова его область видимости?

–

Richard Neil Ilagan

11 Дек 2012 в 19:06

Извините. Я вырезал часть функции, чтобы ее было легче читать, поэтому переменная clone_items никогда не использовалась выше. Make_li и make_h3 - это функции, похожие на make_div, однако я думал, что make_div была единственной функцией, которая, казалось, имела какое-либо отношение к этой проблеме. Make_h3 создает имена пользователей, make_li создает массив элементов для заполнения различных полей. Имя - это глобальная переменная. Опять же, извинения, иногда я не знаю, что вырезать, а что нет.

–

o_O

11 Дек 2012 в 19:22

Answer

Если я правильно понимаю, что вы пытаетесь сделать, вам не нужно .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));
}

1

jjenzz 11 Дек 2012 в 19:17

Question 2

Если я правильно понимаю, что вы пытаетесь сделать, вам не нужно .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));
}

1

jjenzz 11 Дек 2012 в 19:17

Как добавить элемент, все его дочерние элементы и все классы родительского и дочернего элементов с помощью jQuery

1 ответ

Похожие вопросы

Новые вопросы

javascript