元素在移動后仍是上一父級的子級

Question

簡而言之，答案是：insertAfter（）用於要在另一個元素之后插入的元素，而不是要在其后插入內容的元素。 有關完整的代碼，請向下滾動。

我遇到一種情況，當用戶單擊一個按鈕時，某些元素將移到隱藏的容器中，而當用戶單擊另一個按鈕時，這些元素需要移回到其原始位置。

我這樣做（簡而言之）是這樣的：

移至隱藏的容器：

element.data('original_parent', original_parent);
element.data('original_index', original_parent.index());
element.appendTo(hidden_container);

將項目移回其原始容器：

element.data('original_parent').children().eq(element.data('original_index')).prev().insertAfter(element);

但是，這不起作用。 當我將原始父項的子項輸出到控制台時，它還會列出隱藏容器中當前作為子項的元素。 有人知道我該如何解決嗎？

Answer 1

您的邏輯可能不正確，因為刪除和添加的順序可能會有所不同– Arun P Johny 1分鍾前

你是對的。 元素首先輸出到控制台，然后再移動它們，這就是為什么看起來不正確的父級被列為父級的原因。

您確定執行element.data（'original_parent'）會得到任何元素嗎？ – Dhaval Marthak 5分鍾前

肯定會返回一個元素。

---

我已經發現這里發生了什么。 我在要插入元素的原始元素上使用insertAfter函數，而不是在要插入原始元素的元素上使用insertAfter函數。 我的jQuery函數有些混亂。

不過，其余的代碼仍然有效！ 完整的代碼，供那些想要使用該想法並遇到這篇文章的人提供：

function hideNonMatchingLevelElements(jquery_selector) {
    var elements = $(jquery_selector);

    if (!elements.length)
        return false;

    var target = $('#js-hidden-level-elements');

    if (!target.length) {
        console.error('Cannot hide non matching level elements because target cannot be found.');
        return false;
    }

    elements.each(function() {
        $(this).data('original_parent', $(this).parent());
        $(this).data('original_index', $(this).index());
        $(this).appendTo(target);
    });
}

function showMatchingLevelElements(jquery_selector) {
    var elements = $(jquery_selector);

    if (!elements.length)
        return false;

    elements.each(function() {
        // Only show elements that are in the "hidden elements" container.
        if ($(this).parent().attr('id') != 'js-hidden-level-elements')
            return true; // Continue;

        if (!$(this).data('original_parent'))
            return true; // Continue.

        $(this).insertAfter($(this).data('original_parent').children().eq($(this).data('original_index')).prev());
    });
}