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

例えばこのような構造だったとして

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

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

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

行動規範の内容に同意します

回答2件

こんな感じですか？

javascript
1$('#wrap_root .kodomo:visible:eq(4)').after($('<span>ここまで</span>')).next().nextAll().wrapAll('<div>ここまで以降</div>');

http://jsfiddle.net/03ej2rmb/

投稿2015/09/25 10:30

編集2015/09/25 10:37

Lhankor_Mhy

総合スコア36074

ベストアンサー

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

JavaScript
1$(function() {
2	var count = 0;
3	var anchorFlag = false;
4	var afterHtml = '';
5	$('#wrap_root').children('.kodomo').each(function(){
6		if($(this).css('display') != 'none'){
7			++count;
8		}
9		if(count >= 5){
10			if(anchorFlag == false){
11				$(this).after($('<span>').html('ここまで'));
12				anchorFlag = true;
13				return true;
14			} else {
15				afterHtml += $(this).context.outerHTML;
16				$(this).remove();
17			}
18		}
19	});
20	if(afterHtml != ''){
21		$('#wrap_root').append($('<div>').html(afterHtml));
22	}
23});

投稿2015/09/25 05:21

編集2015/09/25 07:31

notable

総合スコア415

enokiyo

2015/09/25 06: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>