javascript - 使用 jQuery 操作 DOM

Question

这应该相当简单，但我似乎遗漏了什么。我正在做一个小项目，我正在编写的代码旨在跨文档做一些事情。这是我要将脚本的操作应用到的 HTML 代码:

<div class="entry">
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>Third paragraph</p>
    <p>One more...</p>

    <div class="bttn"><a href="#">Click for More</a></div>
</div>

此模板(即，多个 p 元素和一个类为“bttn”的 div 在类为“的包装器 div 内entry") 在文档中重复多次。用户将内容添加到段落中，并最终将其发布到网站上。这是我希望在 .js 文件中执行的操作:

1. 计算 div 元素内的所有 p 元素与类“进入”。
2. 在整个文档中，如果每个 div 中有两个以上的 p 元素被归类为“条目”，我想保留前两个 保持不变，并将其余部分移动到具有类“slider”的新 div 元素。这个新元素将放置在“点击更多”按钮之后。
3. 将类“show”添加到已存在的分类为“bttn”的 div 元素中，但仅添加到属于类“entry”的那些包含超过两段，并被移动到新的 div 类“ slider ”。新按钮将如下所示:div class="bttn slider"(加上 anchor 标记和模板中显示的所有其他内容)。

所以基本上，如果发布内容的用户向 HTML 模板添加了两个以上的段落，当文档准备就绪时，我希望脚本采用其他段落，将它们移动到新的 div 元素，并向按钮添加一个新类。最后，当单击“点击更多”按钮时，删除并随后插入的额外段落将很好地淡入淡出(因为一旦我重新插入它们，我会将它们隐藏在按钮下)。这是我到目前为止所做的:

$('.entry').each(function () {
    $counter = $('.entry p').length;

    if ($counter > 2) {
        $removeExtra = $(this).find('p').not(':eq(1)').not(':eq(0)').detach();

        $(this).find('.bttn').after(function () {
            return '<div class="slider">' + $removeExtra.html() + '</div>';
        }).addClass('show');
    }
});

问题:

• 我们都知道html()方法只会返回第一组匹配的元素，所以点击按钮我只得到第一个从每个类“条目”中删除的段落，我需要得到返回我存储在变量中的 所有 分离段落$removeExtra.
• 类为“bttn”的每个 div 元素都将获得新类“show”，我只希望这种情况发生在属于类“的元素上”条目”，删除了一些额外的段落。从一开始就有两段的 div class="entry"元素在按钮的类中应该看不到任何修改。

非常感谢对此的任何帮助。提前致谢!

Answer 1

这一行:

$counter = $('.entry p').length;

当您想要当前“.entry”div 中的段落时，在任何“.entry”div 中查找所有段落。此外，您不需要将回调函数语法与 .after() 一起使用因为您使用它一次只添加一个元素。

试试这个:

$('.entry').each(function () {
    var $this = $(this),
        $p = $this.find('p');

    if ($p.length > 2) {
        $('<div class="slider"/>').appendTo(this).append($p.slice(2));
        $this.find('.bttn').addClass('show');
    }
});

我用过 the .append() method而不是 .after() 因为 .append() 会自动将它们添加到您要追加的元素的最后一个子元素之后。您不需要在将段落附加到新的 div 之前分离它们，因为 .append() 将移动它们(至少，它会在只有一个目标元素 - 就像这里的情况一样)。

我用过 .slice()而不是你的 .not(':eq(1)').not(':eq(0)').

请注意，您应该使用 var 声明变量，否则它们将成为全局变量。