我的 jquery 只适用于控制台

Question

我创建了一个 Twitter 提要 API 解决方案。脚本如下所示：

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

API 解决方案效果很好，可以像这样打印 Twitter DOM：

<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 正在 a 标签内创建这些 span 元素。我猜，原因是这是他们创建缩短链接的方式，因此您将能够切掉部分内容。我想定位推文 a 标签内的第二个跨度，使其可见但隐藏其他跨度。

我只能通过 css 解决这个问题：

#twitter-feed ul li .info .tweet a span {
    display: none;
}

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

但它在 IE8 中无法工作，因为它不支持第 nth-child。

棘手的部分来了，我不明白。当我运行下面的代码在 Chrome 的控制台中时，它起作用了。但是在 Web 服务器上的文档中，它没有启动。它没有产生错误，我看不出它不会启动的原因运行:

$("#twitter-feed ul li .info .tweet a span:nth-child(2)").addClass("twitter-link-short");

有人知道为什么它不运行吗？

Answer 1

可能是因为 document.ready() 事件在 Twitter 流有机会加载之前被触发 - 选择返回为空，因为那里还没有任何内容。

您需要运行在 Twitter 小部件填充该代码后。

编辑：查看 Satpal 的答案 - 使用

注册一个函数成为运行

twitterFetcher.fetch

Answer 2

我自己找到了一个解决方案。发布其他人的答案。这是解决方案：

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

我的 jquery 只适用于控制台

My jquery only works in console

html

jquery

internet-explorer-8