我的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：

<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元素。原因，我猜，是因为这是他们的方式，创造短的链接，所以你将能够切断零件。我想把第二个跨度放在推特的一个标签上，以使其可见，但隐藏其他的跨度。

我只能通过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孩子。

这是一个棘手的部分，我不明白。当我在Chrome控制台中运行下面的代码时，它可以工作。但是，在web服务器上的文档中，它不起作用。它不是在创建错误，我也看不出为什么它不会运行：

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

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

Answer 1

我自己找到了一个解决办法。给别人发个答案。这就是解决办法：

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

Answer 2

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

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

编辑:参见Satpal的答案-注册要运行的函数

​

twitterFetcher.fetch

​