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函数，而不是在原始元素之后插入元素之后插入元素。让我的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());
    });
}

移动后，前一个父母的元素仍然是孩子

1 个答案: