问题描述
||
我在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();