Adding Classes to Empty LI's


I need to add a class to an LI that is empty.

Basically I have a dynamic UL that is being pulled in and the system I have to work with adds an empty LI to clear a row of LI’s - it’s stupid and archaic, but I have to deal with it.

If I have numerous LI elements I can use this:

$('.SubCategoryListGrid ul li:nth-child(4n-0)').addClass('vamoosh').prev().addClass('bookend');

Which is based on the idea that I have rows of 3, and the 4th element is the clearing LI which I apply a class of Vamoosh, which in my CSS I display as none, the prev() is done to add a class to the previous LI so that I can zero out the margin and it can fit nicely in a column.

Now if I only have 1 LI element, the system still adds an LI to clear it, now because the UL’s are dynamically created I have no way of knowing whether or not it is the last element or every 4th element - but I do know that it is an empty LI, so how can I target elements that have nothing in them?


$('.SubCategoryListGrid ul li:empty').addClass('vamoosh').prev().addClass('bookend');

Won’t work if those li have whitespace in them.

If the other li’s have actual elements in them(like a span), you could use


But otherwise, I’d probably be thinking along the lines of .filter() and checking the .text() of each, trimming whitespace, and checking for remaining characters.

The system generates this code for the LI’s apparently.

<li style=“float: none; clear: both;”/>

So it’s self-closing, which I didn’t even know was valid code.

This is the page.

The last element is not getting the class applied to it.

The last one has a text node as a child(whitespace), so it’s not :emtpy

Right, I see it has this text - "

Can I target LI’s that have that text and apply a class to that?

Yes, but the other two methods I suggested are not working?

Nope, the :empty method obviously didn’t work for the last LI element - haven’t tried the other one yet. When you have the * sign, that’s wildcard isn’t it, I would need to be more specific like target elements that don’t have an anchor or something?

	$('.SubCategoryListGrid ul li:not(:has(a))').addClass('vamoosh');

Works a treat. Thanks.

  • means any dom node whos nodeType is 1(ELEMENT_NODE). Text nodes are not elements.