【发布时间】：2010-06-22 15:39:19
【问题描述】：
我正在研究 WP 主题的 cmets 部分，并且样式需要使用一些聪明的 jQuery 才能使其正常工作...但是，当尝试在长嵌套的 UL 中设置管理 cmets 的样式时，我在使用 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/
【问题讨论】：
-
请稍等，我会发布一个示例..
-
除非我严重误解了要求，否则您应该可以使用直接的 CSS 来处理。
-
我可以，但是我必须为每个元素重新声明 css 样式的次数，因为它级联将是荒谬的......我能够使它工作 3 级深，但超过了，尝试设置 admin cmets 的样式，然后设置 admin cmets 的子级和 admin cmets 的子级 admin cmets 有点臃肿...
-
我的意思是定义一个适用于第一级
li元素的样式，以及一个只适用于第二级以上li元素的不同样式。