CODEWITHSUNDEEP
jqueryparentchildren
Brandt DeLorenzo
Brandt DeLorenzo

Reputation:

Add another CSS Style to Child Elements which are also Parents

So my list looks something like this: 

<div="list">
  <ul>
    <li class="page item">Parent 1
      <ul>
        <li class="page item">Child of Parent 1 and Parent of Grandchild
          <ul>
            <li class="page item">Grandchild</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

This is through Wordpress' list_wp_pages along with a custom CSS suckerfish-like dropdown CSS code. Nothing can be changed in the unordered list itself, so I need to find a way to add a CSS style to only child pages that are also parents (Child of a Parent 1...).

I've been trying to add an arrow icon only to child pages that have child pages of their own. I figured that I could use:

$("#target").addClass("newclass");

to add an extra class with an arrow icon as a background image.

Thanks!

Upvotes: 3

Views: 2165

Answers (1)

user4903
user4903

Reputation: 

$("#target li").each(function() {
    if ( $("ul:eq(0)", this).length > 0 ) {
        $(this).addClass("class_name");
    }
});

Checks every list item under #target to see if it has at least one child unordered list, and if it does, then it adds a class name to the list item it just checked.

Upvotes: 2

Related Questions