質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.04%

jquery & Javascript でのDOM書き換えについて

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 1,331

score 70

例えばこのような構造だったとして
<div id="wrap_root">
 <div class="kodomo"></div>
 <div class="kodomo" style="display:none"></div>
 <div class="kodomo"></div>
 <div class="kodomo" style="display:none"></div>
 <div class="kodomo"></div>
 <div class="kodomo"></div>
 <div class="kodomo"></div> 
 <div class="kodomo"></div>
 <div class="kodomo" style="display:none"></div>
 <div class="kodomo"></div>
 <div class="kodomo"></div>
 <div class="kodomo" style="display:none"></div>
 <div class="kodomo" style="display:none"></div>
 <div class="kodomo" style="display:none"></div>
</div>

id=wrap_root内のclass=kodomoのdisplay=noneでない先頭から5つ直後に<span>ここまで</span>といれたいです。

JQueryを使った方がいいのか使わない方がいいのかもわかれば・・・。

よろしくお願いいたします。


  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

もっと良い書き方があるかもしれませんが参考になれば…!

$(function() {
    var count = 0;
    var anchorFlag = false;
    var afterHtml = '';
    $('#wrap_root').children('.kodomo').each(function(){
        if($(this).css('display') != 'none'){
            ++count;
        }
        if(count >= 5){
            if(anchorFlag == false){
                $(this).after($('<span>').html('ここまで'));
                anchorFlag = true;
                return true;
            } else {
                afterHtml += $(this).context.outerHTML;
                $(this).remove();
            }
        }
    });
    if(afterHtml != ''){
        $('#wrap_root').append($('<div>').html(afterHtml));
    }
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/25 15:41

    ありがとうございます。
    ここまでを挿入するのはわかりました。
    ここまで挿入位置から最後までを<div>で囲むにはどうしたらよいでしょうか?

    <div id="wrap_root">
    <div class="kodomo"></div>
    <div class="kodomo" style="display:none"></div>
    <div class="kodomo"></div>
    <div class="kodomo" style="display:none"></div>
    <div class="kodomo"></div>
    <div class="kodomo"></div>
    <div class="kodomo"></div>
    <span>ここまで</span>
    <div>ここまで以降
    <div class="kodomo"></div>
    <div class="kodomo" style="display:none"></div>
    <div class="kodomo"></div>
    <div class="kodomo"></div>
    <div class="kodomo" style="display:none"></div>
    <div class="kodomo" style="display:none"></div>
    <div class="kodomo" style="display:none"></div>
    </div>
    </div>

    キャンセル

  • 2015/09/25 15:45

    横から失礼します。

    このソースだと、
    5番目のdivタグが "display:none" だと、ここまで の上にあるのが4つになってしまいます。

    count=0から始めて
    display:noneの判定を if(count>=5)より前で行うといいと思います。

    キャンセル

  • 2015/09/25 16:32

    kaputarosさん

    回答のソースに反映しました。
    ご指摘ありがとうございます!


    enokiyoさん

    回答のソースを編集し、ここまで以降の対応をしてみました。
    でもこの対応はソースを出力する前に行うべき処理な気がしますねー

    キャンセル

+1

こんな感じですか?
$('#wrap_root .kodomo:visible:eq(4)').after($('<span>ここまで</span>')).next().nextAll().wrapAll('<div>ここまで以降</div>');
http://jsfiddle.net/03ej2rmb/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る