使用jQuery检查LI是否具有“父” LI？

Question

I'm working on the comments section of a WP theme, and the styling requires the use of some clever jQuery in order to make it work right... However, when trying to style admin comments in a long nested UL, I'm having trouble traversing the DOM with jQuery to find the elements I need to adjust the CSS for...

Here's what I've tried using:

$('.commentlist li.admin').each(function() {
  if ($(this).parents('li').size() > 0 ) {
    //Has parent LI, so this is a child comment
    $(this).children('.avatar').css({'background-position':'right -2530px'});
    $(this).children('.avatar img').css({'border-right':'1px solid #fff','border-bottom':'1px solid #fff'});
  }
  else {
    //Has no parent LI, top level comment
    $(this).children('.avatar').css({'background-position':'0 -2530px'});
    $(this).children('.avatar img').css({'border-right':'1px solid #fff','border-bottom':'1px solid #fff'});
  }
});

Basically I want to apply certain styles to elements within "top level" LI elements with the class "admin", and apply another set of styles to elements within "nested" LI elements with the class "admin".

I thought that by checking to see if an LI element had a parent LI then that would be a quick way to do it, but I'm apparently going about it the wrong way...

Any ideas?

PS- Here's a sample of my HTML structure:

            <ul class="commentlist">
            <li>
                <div class="border-fake">
                    <div class="comment-header">
                        <small>3rd may, 2009</small>
                        <div class="rank rank2"></div>
                    </div><!--/comment-header-->
                    <div class="comment-body">
                        <div class="avatar">
                            <img src="http://www.gravatar.com/avatar/3b3be63a4c2a439b013787725dfce802?s=61" />
                        </div><!--/avatar-->
                        <h4 class="comment-author">Joe Bloggs</h4>
                        <small class="author-url">ohmygodisuck.me</small>
                        <div class="clearit"></div>
                        <div class="comment-text">
                            <p>Amet! Ut aliquam tempor sit tempor. In, placerat, mattis mid porta pid? Vut ut tincidunt ac, porta placerat nisi auctor elit? Dignissim vel! Amet.</p>
                            <p>Amet! Ut aliquam tempor sit tempor. In, placerat, mattis mid porta pid? Vut ut tincidunt ac, porta placerat nisi auctor elit? Dignissim vel! Amet.</p>
                        </div><!--/comment-text-->
                        <div class="reply">
                            <a href="#">reply</a>
                        </div><!--/reply-->
                    </div><!--/comment-body-->
                </div><!--/border-fake-->
            </li>
            <li class="admin">
                <div class="border-fake">
                    <div class="comment-header">
                        <small>3rd may, 2009</small>
                        <div class="rank rankadmin"></div>
                    </div><!--/comment-header-->
                    <div class="comment-body">
                        <div class="avatar">
                            <img src="http://www.gravatar.com/avatar/e610fd44bdd000891b3a67a22d1676b7?s=61" />
                        </div><!--/avatar-->
                        <h4 class="comment-author">Jamie Carter</h4>
                        <small class="author-url">jamiecarter.me</small>
                        <div class="clearit"></div>
                        <div class="comment-text">
                            <p>Amet! Ut aliquam tempor sit tempor. In, placerat, mattis mid porta pid? Vut ut tincidunt ac, porta placerat nisi auctor elit? Dignissim vel! Amet.</p>
                            <p>Amet! Ut aliquam tempor sit tempor. In, placerat, mattis mid porta pid? Vut ut tincidunt ac, porta placerat nisi auctor elit? Dignissim vel! Amet.</p>
                        </div><!--/comment-text-->
                        <div class="reply">
                            <a href="#">reply</a>
                        </div><!--/reply-->
                    </div><!--/comment-body-->
                </div><!--/border-fake-->
                <ul class="children">
                    <li>
                        <div class="border-fake">
                            <div class="comment-header">
                                <small>3rd may, 2009</small>
                                <div class="rank rank4"></div>
                            </div><!--/comment-header-->
                            <div class="comment-body">
                                <div class="avatar">
                                    <img src="http://www.gravatar.com/avatar/3b3be63a4c2a439b013787725dfce802?s=44" />
                                </div><!--/avatar-->
                                <div class="comment-text">
                                    <p>Amet! Ut aliquam tempor sit tempor. In, placerat, mattis mid porta pid? Amet! Ut aliquam tempor sit tempor. In, placerat, mattis mid porta pid? Vut ut tincidunt ac, porta placerat nisi auctor elit? Dignissim vel! Amet. Vut ut tincidunt ac, porta placerat nisi auctor elit? Dignissim vel! Amet.</p>
                                    <p>Amet! Ut aliquam tempor sit tempor. Amet! Ut aliquam tempor sit tempor. In, placerat, mattis mid porta pid? Vut ut tincidunt ac, porta placerat nisi auctor elit? Dignissim vel! Amet. In, placerat, mattis mid porta pid? Vut ut tincidunt ac, porta placerat nisi auctor elit? Amet! Ut aliquam tempor sit tempor. In, placerat, mattis mid porta pid? Vut ut tincidunt ac, porta placerat nisi auctor elit? Dignissim vel! Amet. Dignissim vel! Amet.</p>
                                    <div class="clearit"></div>
                                    <h4 class="comment-author">Weird Guy</h4>
                                    <small class="author-url">howdydoo.com</small>
                                </div><!--/comment-text-->
                                <div class="reply">
                                    <a href="#">reply</a>
                                </div><!--/reply-->
                            </div><!--/comment-body-->
                        </div><!--/border-fake-->
                    </li>
                    <li>
                        <div class="border-fake">
                            <div class="comment-header">
                                <small>3rd may, 2009</small>
                                <div class="rank rank1"></div>
                            </div><!--/comment-header-->
                            <div class="comment-body">
                                <div class="avatar">
                                    <img src="http://www.gravatar.com/avatar/3b3be63a4c2a439b013787725dfce802?s=44" />
                                </div><!--/avatar-->
                                <div class="comment-text">
                                    <p>Amet! Ut aliquam tempor sit tempor. In, placerat, mattis mid porta pid? Vut ut tincidunt ac, porta placerat nisi auctor elit? Dignissim vel! Amet.</p>
                                    <p>Amet! Ut aliquam tempor sit tempor. In, placerat, mattis mid porta pid? Vut ut tincidunt ac, porta placerat nisi auctor elit? Dignissim vel! Amet.</p>
                                    <div class="clearit"></div>
                                    <h4 class="comment-author">Jimbo Wilson</h4>
                                    <small class="author-url">countrybumpkin.com</small>
                                </div><!--/comment-text-->
                                <div class="reply">
                                    <a href="#">reply</a>
                                </div><!--/reply-->
                            </div><!--/comment-body-->
                        </div><!--/border-fake-->
                    </li>
                </ul>
            </li>
        </ul>

And just for good measure, here's an online demo so you can see what's going on and what's not... http://joshjones.me/comment-test/

Answer 1

Unless I'm mistaken, the nested ones are all under the .children class, right?

So why not something like this:

ul.commentlist > li.admin > .border-fake > .comment-body > .avatar {
    background-position: right -2530px;
}
ul.commentlist > li.admin > .border-fake > .comment-body > .avatar > img {
    border-right:1px solid #fff;
    border-bottom:1px solid #fff;
}

ul.children .avatar {
    background-position:0 -2530px;
}
ul.children .avatar > img {
    border-right:1px solid #fff;
    border-bottom:1px solid #fff;
}

---

EDIT:

It would seem as though your 4 unique selector pairs would be:

    <!-- Top level non-admin -->
ul.commentlist > li > .border-fake > .comment-body > .avatar
ul.commentlist > li > .border-fake > .comment-body > .avatar > img

    <!-- Top level admin ( should override non-admin ) -->
ul.commentlist > li.admin > .border-fake > .comment-body > .avatar
ul.commentlist > li.admin > .border-fake > .comment-body > .avatar > img

    <!-- Nested level non-admin -->
ul.children > li > .border-fake > .comment-body > .avatar
ul.children > li > .border-fake > .comment-body > .avatar > img

    <!-- Nested level admin ( should override non-admin ) -->
ul.children > li.admin > .border-fake > .comment-body > .avatar
ul.children > li.admin > .border-fake > .comment-body > .avatar > img

The ones with the .admin class should override the ones without.