新推文

<li class="tweet normal-tweet" data-user-name="Dorothy">
    <div class="image">
        <img height="48" width="48" src="http://twitter.com/api/users/profile_image?screen_name=Dorothy" alt="" />
    </div>
    <div class="content">
        <div class="user">
            <a class="user-name" href="http://twitter.com/Dorothy" title="Dorothy">Dorothy</a>
            <div class="full-name"></div>
        </div>
        <div class="text">Once in a lullaby</div>
        <div class="time-stamp" data-time="1322631934000">1322631934000</div>
    </div>
</li>

在页面上的每条推文中，还没有新的推文，我使用jQuery来附加一些元素。我有：

var actionsMarkup = 
"<div class='actions'>
    <span class='favorite'>Favorite</span>
    <span class='retweet'>Retweet</span>
    <span class='reply'>Reply</span>
</div>";

我将它附加到具有.content类

的元素

$(actionsMarkup).appendTo('#tweets .tweet .content');

现在，当我发新推文时，我会执行以下操作：

$(document).on('click', '.refresh', function() {
    newTweet = $(<new tweet code from above>);
    actionsMark = $(actionsMarkup);
    $(newTweet.appendTo('#tweets');

我需要能够使用类.content将actionsMark内容附加到div。但是，我不能只重新申请我之前的

陈述

$(actionsMarkup).appendTo('#tweets .tweet .content');

因为它会再次将标记放在所有.content div上，即使它已经存在。

在将newTweet变量附加到文档对象之前，有没有办法让我使用选择器访问newTweet变量中的DOM节点？我在想像

这样的东西

$(actionsMarkup).appendTo( newTweet, '.content');

如果选择器无法执行此操作，那么还有哪些其他快速方法？

推文和推文容器列表

<ul id="tweets" class="normal-tweet show-promoted-tweets">
    <li class="tweet promoted-tweet" data-user-name="Dorothy">
        <div class="image">
            <img height="48" width="48" src="http://twitter.com/api/users/profile_image?screen_name=Dorothy" alt="" />
        </div>
        <div class="content">
            <div class="user">
                <a class="user-name" href="http://twitter.com/Dorothy" title="Dorothy">Dorothy</a>
                <div class="full-name">Dorothy</div>
            </div>
            <div class="text">Somewhere over the rainbow</div>
            <div class="time-stamp" data-time="1322631934000">3 minutes ago</div>
        </div>
    </li>

    <li class="tweet promoted-tweet" data-user-name="lion">
        <div class="image">
            <img height="48" width="48" src="http://twitter.com/api/users/profile_image?screen_name=lion" alt="" />
        </div>
        <div class="content">
            <div class="user">
                <a class="user-name" href="http://twitter.com/lion" title="lion">lion</a>
                <div class="full-name">Lion</div>
            </div>
            <div class="text">Way up high,</div>
            <div class="time-stamp" data-time="1322631934000">17 minutes ago</div>
        </div>
    </li>

    <li class="tweet normal-tweet" data-user-name="scarecrow">
        <div class="image">
            <img height="48" width="48" src="http://twitter.com/api/users/profile_image?screen_name=scarecrow" alt="" />
        </div>
        <div class="content">
            <div class="user">
                <a class="user-name" href="http://twitter.com/scarecrow" title="scarecrow">scarecrow</a>
                <div class="full-name">Scarecrow</div>
            </div>
            <div class="text">And the dreams that you dreamed of,</div>
            <div class="time-stamp" data-time="1322631934000">32 minutes ago</div>
        </div>
    </li>
</ul>

Answer 1

您可以使用.last()，在添加新推文后选择最后一个元素，如下所示：

$(document).on('click', '.refresh', function() {
    newTweet = $(<new tweet code from above>);
    $(newTweet).appendTo('#tweets');
    var actionsMarkup = 
    "<div class='actions'>
        <span class='favorite'>Favorite</span>
        <span class='retweet'>Retweet</span>
        <span class='reply'>Reply</span>
    </div>";
    $("#tweets .tweet").last().find(".content").append(actionsMarkup);
});

如果您坚持使用appendTo()，则可以尝试使用:last-child：

$(actionsMarkup).appendTo('#tweets .tweet:last-child .content');

Answer 2

我一直在寻找是否可以做同样的事情，发现了这个问题，但是现有的答案对我而言并没有用，因为我想在添加之前更改元素。

您可以使用jQuery在变量中创建一个新的dom元素，然后对其进行操作，就好像在添加该元素之前，它已经在dom中一样。

示例：

var newTweet = $('<div></div>');

newTweet.addClass('tweet');
newTweet.append('<span class="username"></span>');
newTweet.find('span.username').html('John Doe');
$('body').append(newTweet);

以下内容将添加到正文：

<div class="tweet"><span class="username">John Doe</span></div>

如果您要构建具有多个选项的可重用界面元素（如对话框），则非常方便。

jquery：如何在包含其他DOM元素的变量中将DOM元素追加到选择器

新推文

推文和推文容器列表

2 个答案: