Show favicons next to external links in BlogEngine.NET

Question

I want show favicon for any external links in my post in BlogEngine.NET, So I use following code in my master page theme :

    <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>

But it shows favicons for all hyper links in page like page header and footer, navigation menu and etc.
I just want to show favicons in my post of blog not for entire page links.
I know that I must specify a css class name for above code, but I don't know how can do that.
All post in BlogEngine.NET are under a div tag with "post" css class name.

 <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>

How can I tell all links within the div with "post" css class must shows favicon not all links in body page?
I use BlogEngine 2.9 .

Thanks in advanced.

Answer 1

Then you could add something like this:

Here are 2 ways at jsfiddle: Sample 1 - Sample 2

(I am not jQuery developer so it might have another/better syntax)

<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>

If the parent is more far down the DOM, check the parents parent and so on.

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

If a class name is equal to "post"

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

And you can combine it with one or more test

<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"
        });
    }      
});