Adding Classes to Empty LI's

JavaScript
1

Hi,

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?

2

Maybe


$('.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

li:not(:has(*))

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.

3

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.

4

This is the page.

http://edgemere.webtise.net/categories/For-The-Horse/

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

5

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

6

Right, I see it has this text - "
"

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

7

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

8

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?

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

Works a treat. Thanks.

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