Question

我希望在BlogEngine.NET的帖子中显示所有外部链接的显示图标，所以我在母版主题中使用以下代码：

    <script type="text/javascript">
        $("a[href^='http']").each(function () {
            $(this).css({
                background: "url(http://www.google.com/s2/favicons?domain=" + this.hostname +
                ") right center no-repeat",
                "padding-right": "20px"
            });
        });
    </script>

但它显示页面中所有超链接的favicon，如页眉和页脚，导航菜单等。
我只想在我的博客文章中显示favicons而不是整页链接我知道我必须为上面的代码指定一个css类名，但我不知道怎么做。
BlogEngine.NET中的所有帖子都在div标签下，带有“ post ”css类名。

 <div id="ctl00_cphBody_PostList1_posts" class="posts">    
    <article id="post0" class="post">
           <h2 class="post-title">
        <div class="post-info Clear">
        <div class="post-body text">
        <p dir="rtl" style="text-align: right;">
            Some text...</p>
            <a target="_blank" href="http://www.microsoft.com">Microsoft1 </a> /* Favicon css does not effect here! */
              <span class="someclass1">
                 <p class="someclass2">
                    Some Text...
                    <a target="_blank" href="http://www.microsoft.com">Microsoft2 </a> /* Favicon css does not effect here! */
                 </p>
              </span>
        </div>
    </article>

如何通过“ 发布 ”来判断div中的所有链接？css类必须显示favicon而不是正文页面中的所有链接？
我使用BlogEngine 2.9。

先谢谢。

Answer 1

然后你可以添加这样的东西：

以下是jsfiddle的两种方式：Sample 1 - Sample 2

（我不是jQuery开发人员所以它可能有另一种/更好的语法）

<script type="text/javascript">
    $("a[href^='http']").each(function () {

        // check if parent class name starts with post
        if (this.parentNode.className.substring(0, 4) == "post") {

            $(this).css({
                background: "url(http://www.google.com/s2/favicons?domain=" + this.hostname +
                ") right center no-repeat",
                "padding-right": "20px"
            });
        }
    });
</script>

如果父母在DOM的更远处，请检查父母父母，依此类推。

        if (this.parentNode.parentNode.className.substring(0, 4) =....

如果类名等于“post”

        if (this.parentNode.className == "post") {

您可以将其与一个或多个测试结合起来

<div id="ctl00_cphBody_PostList1_posts" class="posts">
    <article id="post0" class="post">
        <h2 class="post-title">Title</h2>    
        <div class="post-info Clear">
            <div class="post-body text">
                <a href="http://www.google.com">link</a>
                <a href="http://www.google.com">link</a>
            </div>
        </div>
    </article>
</div>


$("a[href^='http']").each(function () {

    if (this.parentNode.className.substring(0, 4).toLowerCase() == "post" &&
        this.parentNode.tagName.toLowerCase() == "div" &&
        this.parentNode.parentNode.tagName.toLowerCase() == "div" &&
        this.parentNode.parentNode.parentNode.tagName.toLowerCase() == "article"
       )
    {
        $(this).css({
            background: "url(http://www.google.com/s2/favicons?domain=" + this.hostname + ") right center no-repeat", "padding-right": "20px"
        });
    }      
});

在BlogEngine.NET中显示外部链接旁边的favicons

1 个答案: