简体   繁体   English

使用jQuery在很多UL和LI中找到最深的LI

[英]find the deepest LI in a lot of UL and LI using jquery

So there is this tree. 所以有这棵树。 It's compiled from a MySQL database using PHP. 它是使用PHP从MySQL数据库编译而成的。 The problem is that I want to find all the LIs who don't have a UL inside them and more LIs.... 问题是我想找到所有没有UL的LI,并找到更多LI。

example: http://i.stack.imgur.com/Pet8Z.jpg 例如: http//i.stack.imgur.com/Pet8Z.jpg

In the example I marked the LIs who should be selected with jquery, because they don't have any children and that's what I want. 在示例中,我标记了应该使用jquery选择的LI,因为它们没有任何子级,这就是我想要的。

Basically it's just a tree made from categories, but if the deepest category doesn't have any children it should be considered an item and I want jquery to find those items, which don't have any children. 基本上,这只是一棵由类别组成的树,但是如果最深的类别没有任何子代,则应将其视为一项,并且我希望jquery查找没有任何子代的那些项。

This is the whole tree: http://jsfiddle.net/trueskillz/qnRpj/1/ 这就是整棵树: http : //jsfiddle.net/trueskillz/qnRpj/1/

I could do something like this(code down below) and check if it has children or not and then make it's background red(for example) and that's how I would find the 'items' and not 'categories', but there must be a easier way than this.... 我可以做这样的事情(下面的代码),检查它是否有孩子,然后使其背景为红色(例如),这就是我要查找“项目”而不是“类别”的方法,但是必须有一个比这更简单的方法。

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

This is not a way a would like to find the items in this list... So I'm hoping there's a easier way... 这不是您想要在此列表中找到项目的方式...所以我希望有一种更简单的方法...

Several options: 几种选择:

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)");

Your list structure is off a little bit. 您的列表结构有些偏离。 I would suggest trying to organize here: http://tools.arantius.com/tabifier 我建议尝试在这里组织: http : //tools.arantius.com/tabifier

You also don't need jQuery to do this. 您也不需要jQuery来执行此操作。 You can use CSS. 您可以使用CSS。

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

But just deleting one of the ul's you had I was able to get aa close match. 但是只要删除了其中一个ul,我就能获得一场紧密的比赛。 http://jsfiddle.net/gha8V/ http://jsfiddle.net/gha8V/

I would just write out the ul's in a wordpress (or any wysiwyg) visual editor, click over to text, copy it, and then finally organize them html with the tabifier tool above. 我只需要在wordpress(或任何所见即所得)的可视编辑器中写出ul,单击文本,将其复制,然后最后使用上面的Tabifier工具将它们组织为html。

Hope this helps. 希望这可以帮助。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM