My jquery only works in console

Vote count:

0

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(){
    if($('#twitter-feed').length) {
        twitterFetcher.fetch(settings);

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

The API solution works great and print the Twitter DOM like this:

<div id="twitter-feed">
    <ul>
        <li>
            <div class="user">
                <a href="http://ift.tt/1mdWMnd" aria-label="Axiell Sverige (användarnamn: Axiell_Sweden)" data-scribe="element:user_link" target="_blank">
                    <img alt="" src="http://ift.tt/1FoRMq1" data-src-2x="http://ift.tt/1EpujDX" 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="http://ift.tt/1mgmWa6" data-scribe="element:hashtag" target="_blank">#bibliotek</a> 
                    <a href="http://ift.tt/1EpujDZ" data-scribe="element:hashtag" target="_blank">#librarypressdisplay</a> 
                    <a href="http://t.co/10SovFCllx" data-expanded-url="http://ift.tt/1FoRMq9" target="_blank" title="http://ift.tt/1FoRMq9" data-scribe="element:url">
                        <span>http://www.</span>
                        <span>http://ift.tt/1EpujUd;
                        <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="http://ift.tt/1FoRMqb" class="twitter_reply_icon" target="_blank">Svara</a>
                    <a href="http://ift.tt/1FoROOS" class="twitter_retweet_icon" target="_blank">Retweet</a>
                    <a href="http://ift.tt/1EpujUg" 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?

asked 1 min ago

JoakimB

1

My jquery only works in console