使用jquery来获得<ul> <li>结构中的所有父项

如何解决使用jquery来获得<ul> <li>结构中的所有父项

|| 我在HTML中具有以下结构，该结构用于使用jquery创建树形结构。

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

每个li元素旁边都有一个单选按钮（代码中未显示，请假设）。现在，如果从上面的代码中选择值\“ Child \”，那么我应该得到以下结果 \“大父母>父母>子\” 如果我选择父母，那么我应该得到 \“大父母>父母\” 所以基本上我想让所有孩子都成为父母请告知我如何使用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>

谢谢

解决方法

在元素上的事件处理程序内将此代码放入事件处理程序中，以获取所有父母：

$(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>

您可以在按钮的click事件中执行以下操作：

$(\'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/ , 尝试这个：

console.log($(\'ul :parent\'));//return all parent node within first `ul`

$(‘li’).parents()

将列出那个李的所有父母 ,

$(\'input[type=\"radio\"]\').change(function() {
  var $el = $(this); //current radio
  var $parents = $el.parents(\'input[type=\"radio\"]\'); //parent radios
});

, 我不完全了解你的意图。但是我认为选择器的组合可能是解决问题的方法。例如这样的事情应该工作：

$(\':parent li\')

, 我不太了解您的问题。虽然我认为这是您想要的：

$(somethin).parent().children();

使用jquery来获得<ul> <li>结构中的所有父项

如何解决使用jquery来获得<ul> <li>结构中的所有父项

解决方法

相关推荐