javascript - 使用 jquery 获取 结构中的所有 parent

Question

我在 HTML 中有以下结构，我用它来使用 jquery 创建树结构。

<ul>
        <li>Grand Parent
            <ul>
                <li>Parent
                    <ul>
                        <li>child</li></ul>
                </li>
            </ul>
        </li>
    </ul>

每个 li 元素旁边都有一个单选按钮(代码中未显示，请假设)。

现在，如果从上面的代码中选择值“Child”，那么我应该得到以下结果“祖 parent > parent > child ” 如果我选择 parent 那么我应该得到“祖 parent > parent ”

所以基本上我想让所有的 child 都成为 parent

请告知如何使用 jquery 获得上述结果

第 1 部分

<ul class='tree js-catTree'><li><a class='expand'></a><span class='treeNodeInner'><input type='radio' name='category'><a id='10209'>Business</a><ul><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10212'>Top</a></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10214'>New</a></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10413'>Email and Messaging</a></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10414'>Finance</a></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10415'>Mobile Office</a></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10416'>Sales and Field Force</a></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10417'>Calculators  Converters</a></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10418'>Travel  Transportation</a></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10419'>Reference</a></span></li></ul></span></li><li><a class='expand'></a><span class='treeNodeInner'><input type='radio' name='category'><a id='10962'>asdasd</a><ul><li><a class='expand'></a><span class='treeNodeInner'><input type='radio' name='category'><a id='10964'>asd</a><ul><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10420'>Backup  Optimization</a></span></li></ul></span></li></ul></span></li><li><span class='treeNodeInner'><input type='radio' name='category'><a id='10974'>test_23March</a></span></li></ul>

谢谢

Answer 1

在元素的事件处理程序中

将此代码放入您的事件处理程序中以获取所有父项:

$(this).parents('li').add(this).each(function() {
    // This should iterate through all parent <li>s and the current one too
});

试试这个演示:http://jsfiddle.net/XPL7G/

根据选中的单选按钮进行选择

如果要根据选中的单选按钮来选择元素，只需使用 .parents() 方法即可。

假设以下 HTML 标记:

<ul>
    <li><input type="radio" name="li"> Grand Parent
        <ul>
            <li><input type="radio" name="li"> Parent
                <ul>
                    <li><input type="radio" name="li"> child</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<button>Show me</button>

您可以在按钮的点击事件中执行以下操作:

$('button').click(function() {
    var $obj = $('input[type="radio"]:checked').parents('li');

    // The $obj jQuery collection contains your result
});

尝试演示:http://jsfiddle.net/XPL7G/1/

以文本形式获取面包屑路径

由于存在嵌套元素，我们不能使用 jQuery 的 .text() 方法，因为它也会返回所有子元素的组合文本。

解决方案是为我们的 jQuery 对象制作一个数组，颠倒顺序，然后遍历它们，在我们进行时使用原始 HTML DOM 函数提取文本节点(假设与上面相同的标记是列表项，第一个是单选按钮)。

$('button').click(function() {
    var $obj = $('input[type="radio"]:checked').parents('li');

    var result = '';
    $($obj.get().reverse()).each(function(){
        if(result) result += ' > ';
        result += this.childNodes[1].nodeValue;
    });

    // The variable result contains our text breadcrumb
});

演示:http://jsfiddle.net/XPL7G/6/