Q:

My jquery only works in console

I have created a Twitter feed API solution. The script looks like this:
<div id="twitter-feed"></div>
<a href="#" id="twitter-link"> twitter</a>

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="twitter-feed.js"></script>
<script type="text/javascript">
var settings = {
    "id": '[myid]',
    "domId": 'twitter-feed',
    "maxTweets": 2,
    "enableLinks": true
};

$(document).ready(function(){
    twitterFetcher.fetch(settings);

    // Works in console, but not here
    $("#twitter-feed ul li .info .tweet a span:nth-child(2)").addClass("twitter-link-short");
});
</script>

The API solution works great and print the Twitter DOM like this:
<div id="twitter-feed">
    <ul>
        <li>
            <div class="user">
                <a href="https://twitter.com/Axiell_Sweden" aria-label="Axiell Sverige (användarnamn: Axiell_Sweden)" data-scribe="element:user_link" target="_blank">
                    <img alt="" src="https://pbs.twimg.com/profile_images/458495785831657472/HRjODEVf_normal.jpeg" data-src-2x="https://pbs.twimg.com/profile_images/458495785831657472/HRjODEVf_bigger.jpeg" data-scribe="element:avatar">
                    <span>
                        <span data-scribe="element:name">Axiell Sverige</span>
                    </span>
                    <span data-scribe="element:screen_name">@Axiell_Sweden</span>
                </a>
            </div>
            <div class="info">
                <p class="tweet">Nu har Karlshamsborna tillgång till dagstidningar från hela världen. 
                    <a href="https://twitter.com/hashtag/bibliotek?src=hash" data-scribe="element:hashtag" target="_blank">#bibliotek</a> 
                    <a href="https://twitter.com/hashtag/librarypressdisplay?src=hash" data-scribe="element:hashtag" target="_blank">#librarypressdisplay</a> 
                    <a href="http://t.co/10SovFCllx" data-expanded-url="http://www.mynewsdesk.com/se/karlshamn/pressreleases/biblioteksbesoekarna-i-karlshamn-har-tillgaang-till-digitala-dagstidningar-fraan-hela-vaerlden-1129121" target="_blank" title="http://www.mynewsdesk.com/se/karlshamn/pressreleases/biblioteksbesoekarna-i-karlshamn-har-tillgaang-till-digitala-dagstidningar-fraan-hela-vaerlden-1129121" data-scribe="element:url">
                        <span>http://www.</span>
                        <span>mynewsdesk.com/se/karlshamn/p</span>
                        <span>ressreleases/biblioteksbesoekarna-i-karlshamn-har-tillgaang-till-digitala-dagstidningar-fraan-hela-vaerlden-1129121</span>
                        <span>
                            <span>&nbsp;</span>
                        …
                        </span>
                    </a>
                </p>
                <p class="timePosted">Postat på mars 13</p>
                <p class="interact">
                    <a href="https://twitter.com/intent/tweet?in_reply_to=576313062640189440" class="twitter_reply_icon" target="_blank">Svara</a>
                    <a href="https://twitter.com/intent/retweet?tweet_id=576313062640189440" class="twitter_retweet_icon" target="_blank">Retweet</a>
                    <a href="https://twitter.com/intent/favorite?tweet_id=576313062640189440" class="twitter_fav_icon" target="_blank">Favorit</a>
                </p>
            </div>
        </li>
    </ul>
</div>

Twitter is creating these span elements within the a tag. The reason, I guess, is that this is their way to create shortenings of links, so you will be able to cut parts away. I want to target the second span within the a tag of the tweet, to make it visible but hide the other spans.
I could solve this by css only:
#twitter-feed ul li .info .tweet a span {
    display: none;
}

#twitter-feed ul li .info .tweet a span:nth-child(2) {
    display: inline;
}

but then it would not work in IE8 since it does not support nth-child.
Here comes the tricky part, which I do not understand. When I run this code below in the console of Chrome, it works. But in the document on the web server, it does not kick in. It is not creating errors and I can't see the reason why it will not run:
$("#twitter-feed ul li .info .tweet a span:nth-child(2)").addClass("twitter-link-short");

Anyone have a clue why it does not run?

A:

I found out one solution myself. Posting the answer for others. This is the solution:
var twitterLinkShortTimerCount = 0;

    function setTwitterLinkShortCssClass() {
    // Check if any content
    if($('#twitter-feed').html().length > 0) {
        $("#twitter-feed ul li .info .tweet a span:nth-child(2)").addClass("twitter-link-short");
    }
    // If there is still no content
else if(twitterLinkShortTimerCount++ < 1000) { // Stop after 10 sec if no result
        setTimeout(setTwitterLinkShortCssClass, 100);
    }
}

$(document).ready(function(){
    if($('#twitter-feed').length) {
        twitterFetcher.fetch(settings);
        setTwitterLinkShortCssClass();
    };
});

