Struggling with customizing the comments section of a WordPress theme? Utilizing jQuery for styling can be tricky, especially when dealing with nested UL elements like admin comments. The challenge lies in traversing the DOM structure to target specific elements for CSS adjustments.
Here's an attempt at solving this using jQuery:
$('.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'});
}
});
The goal is to style elements within "top level" LI elements with the class "admin" differently from those within "nested" LI elements. While the current approach involves checking for parent LIs, there seems to be a roadblock in achieving the desired outcome...
Any suggestions or alternative methods?
PS- Below is a snippet of the HTML layout:
<ul class="commentlist">
<li>
... (HTML structure example)
</li>
<li class="admin">
... (HTML structure example)
<ul class="children">
<li>
... (HTML structure example)
</li>
<li>
... (HTML structure example)
</li>
</ul>
</li>
</ul>
To better understand the issue and test possible solutions, check out the online demo: