使用 jquery 在很多 UL 和 LI 中找到最深的 LI答案

【问题标题】：find the deepest LI in a lot of UL and LI using jquery使用 jquery 在很多 UL 和 LI 中找到最深的 LI
【发布时间】：2013-08-07 17:31:27
【问题描述】：

所以有这棵树。它是使用 PHP 从 MySQL 数据库编译的。问题是我想找到所有没有 UL 的 LI 以及更多的 LI....

示例：http://i.stack.imgur.com/Pet8Z.jpg

在示例中，我用 jquery 标记了应该选择的 LI，因为他们没有任何孩子，而这正是我想要的。

基本上它只是一个由类别组成的树，但如果最深的类别没有任何子项，它应该被视为一个项目，我希望 jquery 找到那些没有任何子项的项目。

这是整棵树：http://jsfiddle.net/trueskillz/qnRpj/1/

我可以做这样的事情（下面的代码）并检查它是否有孩子，然后将其设置为红色背景（例如），这就是我找到“项目”而不是“类别”的方式，但是一定是比这更简单的方法....

    $("#parttree ul").each(function(){
      $(this).find("li").each(function(){
          $(this).find("ul").each(function(){
              $(this).find("ul").each(function(){
                 $(this).css("background-color","red");
              });
          });
      });
    });

这不是一个想要在这个列表中找到项目的方法......所以我希望有一个更简单的方法......

【问题讨论】：

那么你想找到一棵树中的所有叶子节点吗？
我想是的...我想找到所有没有其他 UL 的 LI

标签： jquery list tree html-lists

【解决方案1】：

几个选项：

var $leaves = $('#parttree li').filter(function() {
    return !$(this).has('ul');
});

var $leaves = $('#parttree li:not(:has(ul))');

var $leaves = $('#parttree li').filter(":not(:has(ul))");

var $leaves = $('#parttree li').not(":has(ul)");

【讨论】：

或.filter(":not(:has(li))") 或.not(":has(li)")，但它可能应该是has(ul)，而不是li
他的回答也有效。我刚刚做了$(leaves).each(function()$(this).css("background-color","red");})，我需要的所有东西都变红了。非常感谢！
@DominykasTijūnaitis 仅供参考，您不需要使用each() 来设置这样的css，也不需要在$() 中包装jquery 对象。使用我的一个示例，$leaves.css('background-color', 'red'); 应该可以工作。
哦，我明白了。再次感谢！我现在有点问题......当我做$leaves.append("part");时，我会在每个项目上写两次，就像这样：clip2net.com/clip/m62718/1375897669-clip-25kb.png。因为我要在它们每个附近添加输入，这是一个巨大的问题......我可以检查那里是否已经存在输入，但是再次......必须解决这个问题，对吗？
你能发布一个简单的 jsfiddle 来演示这个问题吗？

【解决方案2】：

您的列表结构有点偏离。我建议尝试在这里组织：http://tools.arantius.com/tabifier

您也不需要 jQuery 来执行此操作。您可以使用 CSS。

#parttree li:last-child{
   background:red;}

但是，只要删除你拥有的一个 ul，我就能获得一个接近的匹配。 http://jsfiddle.net/gha8V/

我会在 wordpress（或任何所见即所得）可视化编辑器中写出 ul，单击文本，复制它，然后最后使用上面的制表符工具将它们组织成 html。

希望这会有所帮助。

【讨论】：