1

これはかなり単純なはずですが、何かが足りないようです。私が書いているコードがドキュメント全体でいくつかのことを行うことを目的とした小さなプロジェクトに取り組んでいます。スクリプトのアクションを適用する 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要素とクラス "entry" を持つラッパーdiv内のクラス "bttn" を持つ1 つのdiv ) は、ドキュメント全体で複数回繰り返されます。ユーザーは段落にコンテンツを追加し、最終的にそれをサイトに公開します。そして、これが私の.jsファイルでやりたいことです:

  1. クラス "entry" を持つdiv要素内のすべてのp要素をカウントします。
  2. ドキュメント全体を通して、各divクラスの「エントリ」内に2 つ以上のp要素がある場合、最初の 2 つをそのままにして、残りをクラス「スライダー」の新しいdiv要素に移動します。この新しい要素は、[Click for More] ボタンの後に配置されます。
  3. クラス「show」を「bttn」クラスの既存のdiv要素に追加しますが、2 つ以上の段落を含み、クラス「slider」で新しいdivに移動されたクラス「entry」に属する要素にのみ追加します。新しいボタンは次のようになります。

したがって、基本的に、コンテンツを公開したユーザーが HTML テンプレートに 3 つ以上の段落を追加した場合、ドキュメントの準備ができたら、スクリプトで他の段落を取得し、それらを新しいdiv要素に移動し、新しいクラスをボタン。最後に、「Click for More」ボタンをクリックすると、後で削除されて挿入された余分な段落がうまくフェードインします (再挿入したら、ボタンの下に隠しておくためです)。これまでに行ったことは次のとおりです。

$('.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」を取得しています。これは、余分な段落が削除されたクラス「entry」に属する要素にのみ発生するようにしたいと考えています。最初から 2 つの段落を持っていた div class="entry" 要素は、ボタンのクラスで変更されていないはずです。

これについて何か助けていただければ幸いです。前もって感謝します！

4

3 に答える 3

3

私の最初の提案は、次を使用すること: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/

于 2012-05-28T05:07:22.940 に答える
3

この行：

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

現在の「.entry」div内に段落が必要な場合、「.entry」div内のすべての段落を検索しています。また、一度に 1 つの要素のみの後に追加するために使用しているため、コールバック関数構文を使用する必要はありません。.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()メソッドを使用しました。段落を移動するため、新しい div に追加する前に段落を切り離す必要はありません(少なくとも、ここの場合のように、ターゲット要素が 1 つしかない場合は段落を移動します)。.after().append().append()

私は.slice()あなたの代わりに使用しまし.not(':eq(1)').not(':eq(0)')た。

で変数を宣言する必要があることに注意してください。そうしvarないと、グローバルになります。

于 2012-05-28T05:08:13.150 に答える
1

$.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/

よろしく、
Nitin J.

于 2012-05-28T05:34:40.080 に答える