Я работаю над разделом комментариев темы WP, и для стилизации требуется использование некоторого умного jQuery, чтобы заставить его работать правильно ... Однако при попытке стилизовать комментарии администратора в длинном вложенном UL,У меня возникают проблемы при обходе DOM с помощью jQuery, чтобы найти элементы, необходимые для настройки 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'});
}
});
В основном я хочуприменить определенные стили к элементам в элементах LI «верхнего уровня» с классом «admin» и применить другой набор стилей к элементам в «вложенных» элементах LI с классом «admin».
Я думал, чтопроверив, есть ли у элемента 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/