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

时间：2010-06-22 15:39:19

标签： jquery css dom traversal

我正在研究WP主题的评论部分，并且样式需要使用一些聪明的jQuery才能使其正常工作......但是，当尝试在长嵌套UL中设置管理员注释时，我无法使用jQuery遍历DOM以找到我需要调整CSS的元素...

以下是我尝试使用的内容：

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

基本上我想将某些样式应用于具有“admin”类的“顶级”LI元素中的元素，并将另一组样式应用于具有“admin”类的“嵌套”LI元素中的元素。

我认为通过检查一个LI元素是否有一个父LI，那么这将是一个快速的方法，但我显然是错误的方式......

有什么想法吗？

PS-这是我的HTML结构示例：

            <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>

只是为了更好的衡量，这是一个在线演示，这样你就可以看到发生了什么，什么不是...... http://joshjones.me/comment-test/

1 个答案:

答案 0 :(得分：0)

除非我弄错了，否则嵌套的都在.children类之下，对吗？

那么为什么不这样呢：

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;
}

修改

看起来好像你的4个唯一选择器对是：

    <!-- 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

具有.admin类的那些应该覆盖没有。{/ p>的那些

相关问题
最新问题