CODEWITHSUNDEEP
jquerylisttreehtml-lists
TrueSkillZ
TrueSkillZ

Reputation: 307

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. The problem is that I want to find all the LIs who don't have a UL inside them and more LIs....

example: https://i.sstatic.net/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.

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.

This is the whole tree: 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...

Upvotes: 0

Views: 688

Answers (2)

t-roo
t-roo

Reputation: 11

Your list structure is off a little bit. I would suggest trying to organize here: http://tools.arantius.com/tabifier

You also don't need jQuery to do this. You can use CSS.

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

But just deleting one of the ul's you had I was able to get a a close match. 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.

Hope this helps.

Upvotes: 0

Jason P
Jason P

Reputation: 27012

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

Upvotes: 3

Related Questions