Question

我创建了一个Twitter feed 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正在标签内创建这些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-child。

这是棘手的部分，我不明白。当我在Chrome控制台中运行以下代码时，它可以运行。但是在Web服务器上的文档中，它没有启动。它没有创建错误，我无法看到它不会运行的原因：

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

任何人都知道为什么不运行？

Answer 1

可能是因为在Twitter流有机会加载之前触发了document.ready（）事件 - 选择结果是空的，因为那里还没有任何东西。

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

编辑：请参阅Satpal的答案 - 注册一个使用

运行的功能

＆＃13;

twitterFetcher.fetch

＆＃13;

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只适用于控制台

2 个答案: