特定の範囲内での要素数のカウント方法

Question

jquery.pepで要素を次々に生成します。

//ボタン１アクション	
$(function(){
	$("#btn1").click(function(){
		//ブロックの生成
		$("div#born").css("position","absolute");
		var random4 = Math.floor( Math.random() * 700 ) + 300;
		$("div#born").offset({ top: 100, left: random4 });
		$("div#born").append('<div class="pep peppable"><img id="test" src="img/1.png" alt="一円" height="80" style="position: absolute; z-index: 4;"></div>');
		$('.pep.peppable').pep({
          droppable: '.droppable',
          overlapFunction: false,
          useCSSTranslation: false,
          start: function(ev, obj){
            obj.noCenter = false;
          },
          drag: function(ev, obj){
            var vel = obj.velocity();
            var rot = (vel.x)/5;
            rotate(obj.$el, rot);
          },
          stop: function(ev, obj){
            rotate(obj.$el, 0);
			//handleCentering(ev, obj);
          },
          rest: handleCentering,
        });
		addPep();
		$("div#born").offset({ top: 10, left: 10});
					//ダブル動作で削除
			$('.pep.peppable').on('touchend', function(e){
			e.preventDefault();
			}).hammer().on('doubletap', function(event){
			$(this).remove();
			});
			$('.pep.peppable').dblclick(function(){
			$(this).remove();
			});
	});
});

その後生成した要素を動かすのですが、ある特定の範囲、例えば位置と大きさが固定されたdiv内の要素数をカウントしたいのです。
ページ内の要素数であれば以下のコードでカウントできました。

//テスト用要素カウントjs
	$(function(){
	$('#btn7').click(function(){
    var len = $('.pep').length;
    console.log(len);
  　　});
	});

div要素の位置と大きさから座標を得て、その範囲内でカウント、という流れかもしれませんがさっぱりわかりません。

どうぞよろしくお願いします。

Answer 1

特定のdiv内なら

$('特定のdivセレクタ').find('.pep').length

見た目上の範囲を指定する場合は
.pepのそれぞれのオフセット位置を調べて、その表示範囲と合致するかどうかを
突合していく必要があると思います

Answer 2

見た目上の個数をカウントしたかったため、他の方法をとりました。しかしoffset等かなり勉強になりました。ありがとうございます。