Question

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

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

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

现在，如果从上面的代码中选择值“Child”，那么我应该得到以下结果 “祖父母＆gt;父母＆gt;儿童” 如果我选择父母，那么我应该得到 “祖父母＆gt;父母”

所以基本上我想让所有孩子的父母

请告知我如何使用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/

Answer 2

试试这个：

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

Answer 3

$(‘li’).parents()

将列出该li的所有父母

Answer 4

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

Answer 5

我并不完全理解你的意图但是我认为选择器的组合可能是解决它的原因。例如，这样的事情应该有效：

$(':parent li')

Answer 6

我没有正确理解你的问题..

虽然我认为这是你想要的：

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

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

6 个答案:

在元素

根据选中的单选按钮选择

将痕迹路径作为文本