当前位置： 文江博客话题详情

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

发布于 2024-09-06 11:10:07 字数 8545 浏览 0 评论 0原文

我正在研究 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'});
  }
});

基本上我想将某些样式应用于“顶级”LI 元素中具有“admin”类的元素”，并将另一组样式应用于类为“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>

为了更好地衡量，这里有一个在线演示，以便您可以看到发生了什么和没有发生什么...

原文

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/

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

风流物 2024-09-13 11:10:07

除非我弄错了，否则嵌套的都在 .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 类的选择器应该覆盖不带 .admin 类的选择器对。

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.

回复 原文
~没有更多了~

关于作者

隐诗

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

lioqio

文章 0 评论 0

Single

文章 0 评论 0

禾厶谷欠

文章 0 评论 0

alipaysp_2zg8elfGgC

文章 0 评论 0

qq_N6d4X7

文章 0 评论 0

放低过去

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文