Question

所以我有一系列嵌套的ul元素作为树的一部分，如下所示：

<ul>
<li>
    <ul>
        <li>1.1</li>
        <li>1.2</li>
    </ul>
    <ul>
        <li>2.1</li>
        <li>
            <ul>
                <li>2.2</li>
            </ul>
        </li>
    </ul>
    <ul>
        <li>3.1</li>
        <li>3.2</li>
    </ul>
</li>
</ul>

假设当3.1是所选节点时，当用户点击之前，所选节点应为2.2。坏消息是可能存在任何数量的层次。如何使用jquery找到与当前所选节点相关的上一个节点（li）？

Answer 1

DOM定义了文档遍历类，允许顺序处理树内容。 TreeWalker和NodeIterator类是完美的候选者。

首先，我们创建一个TreeWalker实例，该实例可以顺序遍历<li>个节点。

var walker = document.createTreeWalker(
    document.body, 
    NodeFilter.SHOW_ELEMENT,
    function(node) {
            var hasNoElements = node.getElementsByTagName('*').length == 0;
            return (node.nodeName == "LI" && hasNoElements) ? 
                        NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
    },
    false
);

接下来，我们迭代到TreeWalker中的当前节点。假设我们在myNode中引用了当前节点。我们将遍历此walker，直到我们达到myNode或空值。

while(walker.nextNode() != myNode && walker.currentNode);

在这个TreeWalker中到达我们的节点后，获取上一个节点是件小事。

var previousNode = walker.previousNode();

您可以尝试example here。

这是向后树步行者的通用版本。它是TreeWalker界面的一个小包装。

function backwardsIterator(startingNode, nodeFilter) {
    var walker = document.createTreeWalker(
        document.body, 
        NodeFilter.SHOW_ELEMENT,
        function(node) {
            return nodeFilter(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
        },
        false
    );

    walker.currentNode = startingNode;

    return walker;
}

它需要一个起始节点和一个自定义过滤器功能来删除不需要的元素。以下是从给定节点开始的示例用法，仅包含叶li元素。

var startNode = document.getElementById("2.1.1");

// creates a backwards iterator with a given start node, and a function to filter out unwanted elements.
var iterator = backwardsIterator(startNode, function(node) {
    var hasNoChildElements = node.childElementCount == 0;
    var isListItemNode = node.nodeName == "LI";

    return isListItemNode && hasNoChildElements;
});

// Call previousNode() on the iterator to walk backwards by one node.
// Can keep calling previousNode() to keep iterating backwards until the beginning.
iterator.previousNode()

使用interactive example更新。点击列表项以突出显示上一个列表项。

Answer 2

你可以在jQuery中这样做：

http://jsfiddle.net/haP5c/

$('li').click(function() {
    var $this = $(this);

    if ($this.children().length == 0) {
        var $lis = $('#myUL').find('li'),
            indCount = 0,
            prevLI = null;

        $lis.each(function(ind, el) {
            if (el == $this[0]) {
                indCount = ind;
                return false;
            }
        });

        for (indCount=indCount-1; indCount >= 0; indCount--) {
            if ($($lis[indCount]).children().size() == 0) {
                prevLI = $lis[indCount];
                break;
            }
        }

        if (prevLI) {
            alert($(prevLI).text());
        }
    }
});

基本上，如果单击一个元素，它将搜索之前没有任何子节点的LI节点。如果是，它认为它是链中的前一个。正如你在jsfiddle上看到的那样，它完美无缺。

Answer 3

以下是如何将其作为jQuery插件（根据MIT许可证授权）。在jQuery加载后加载它：

/*
 * jQuery Previous/Next by Tag Name Plugin.
 * Copyright (c) 2010 idealmachine
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.  IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 */

(function($) {
    $.fn.prevByTagName = function(containerSelector) {
        return this.map(function() {
            var container = containerSelector ? $(this).parents(containerSelector).last()[0] : document,
                others = container.getElementsByTagName(this.tagName),
                result = null;
            for(var i = 0; i < others.length; ++i) {
                if(others[i] === this) {
                    break;
                }
                result = others[i];
            }
            return result;
        });
    };
    $.fn.nextByTagName = function(containerSelector) {
        return this.map(function() {
            var container = containerSelector ? $(this).parents(containerSelector).last()[0] : document,
                others = container.getElementsByTagName(this.tagName),
                result = null;
            for(var i = others.length; i--;) {
                if(others[i] === this) {
                    break;
                }
                result = others[i];
            }
            return result;
        });
    };
})(jQuery);

// End of plugin

要查找上一个上一个li元素（标识为ul的最外面的myUL）没有ul子元素，您可以使用{上的插件{1}}像这样：

$(this)

你可以try it out on jsFiddle。

Answer 4

一种相当简单的方法，可以在没有任何JavaScript框架的情况下工作：

var lis = document.getElementsByTagName("li"), prev;

for (var i = 0; i < lis.length; i++) {
    if (lis[i] == myCurLI) break;
    prev = lis[i];
}

现在prev拥有之前的LI。

编辑：请参阅我的其他答案，了解使用XPath的解决方案，该解决方案没有树面提到的缺陷。

Answer 5

由于我的简单方法存在缺陷这一事实轻微“烦恼”，这是XPath的一个解决方案：

$('li').click(function() {
    var lis = document.getElementsByTagName("li"), 
        prev = null,
        myCurLI = this;

    if ($(this).children().length == 0) {
        // collect all LI-elements that are leaf nodes
        var expr = "//li[count(child::*) = 0]", xp, cur;

        xp = document.evaluate(expr, document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

        while (cur = xp.iterateNext()) {
            if (cur == myCurLI) break;
            prev = cur;
        }

        if (prev) alert($(prev).text());
        else alert("No previous list element found");
    }
});

注意：我从treeface的答案中复制了事件处理代码，因为我不熟悉该框架。

我如何递归DOM树？

5 个答案: