使用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元素和一個DIV與類“條目”的包裝DIV中的類“BTTN”）是在文檔重復多次。 用戶將內容添加到段落中，並最終將其發布到網站上。 這是我希望在.js文件中執行的操作：

1. 用“ entry”類計算div元素內的所有p元素。
2. 在整個文檔中，如果每個div內有兩個以上被歸類為“ entry”的p元素，我希望保持前兩個不變，並將其余的移至具有“ slider”類的新div元素。 該新元素將放置在“單擊更多”按鈕之后。
3. 將類“ show”添加到已存在的，分類為“ bttn”的div元素中，但僅添加到屬於“ entry”類的元素，該元素包含兩個以上的段落，並且已通過“ slider”類移動到新的div中 。 新按鈕將如下所示：div class =“ bttn slide”（加上定位標記和模板中顯示的所有其他內容）。

因此，基本上，如果發布內容的用戶在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（）方法將僅返回第一組匹配的元素，因此在單擊按鈕時，我只獲得從每個類“ entry”中刪除的第一段，並且我需要取回所有我分離的段落存儲在變量$ removeExtra中。
• 每個帶有“ bttn”類的div元素都將獲得新的“ show”類，我只希望這種情況發生在屬於“ entry”類的類中，這些類看到了一些額外的段落。 從頭開始有兩段的div class =“ entry”元素應該在按鈕的類中看不到任何修改。

將不勝感激與此有關的任何幫助。 提前致謝！

Answer 1

我最初的建議是使用:gt ：

$(".entry").each(function(){
    var ps = $("p:gt(1)", this);
    if ( ps.length ) {
        $(".bttn", this).addClass("show").after(function(){
            return $("<div>").addClass("slider").append(ps);    
        });
    }        
});​​​​​​​​​​​​​​​​​​​​​​​

如果我在任何程度上混淆了細節，我深感抱歉-這個問題有點冗長。

小提琴： http : //jsfiddle.net/FfmaB/1/

Answer 2

這行：

$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');
    }
});

我使用了.append()方法而不是.after()因為.append()會自動將它們添加到要追加元素的最后一個子元素之后。 您無需在將段落附加到新的div之前分離它們，因為.append()會移動它們（至少，當只有一個目標元素時，它將移動它們-就像這里的情況）。

我使用了.slice()而不是您的.slice() .not(':eq(1)').not(':eq(0)') 。

請注意，您應該使用var聲明變量，否則它們將成為全局變量。

Answer 3

查看$.html()函數的文檔：
http://api.jquery.com/html/

如果選擇器表達式匹配多個元素，則僅第一個匹配項將返回其HTML內容。

我相信這就是您想要的：

$(document).ready(Process);

function Process() {
    $('.entry').each(function() {
        var $this = $(this);
        $counter = $this.find('p').length;

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

            $($Extras.get().reverse()).each(function() {
                var extra = $(this).html();
                $this.find('.bttn').after('<div class="slider">' + extra + '</div>');
                $this.find('p').not(':eq(1)').not(':eq(0)').detach();
            })
            $this.find(".bttn").addClass('show');
        }
    });
}​

演示： http : //jsfiddle.net/xcuh9/2/

問候，
尼丁·J。