0

I have main div(parent) with class .box and in which more than one (no limit)child div with class .abc, so how can we only select those child div which are occur after 400px height of parent div. Means,no all child div are select but only select those are after 400px height of parent div. though,parent div height is not fix.

<div class="box">
 <div class="abc"></div>
 <div class="abc"></div>
 <div class="abc"></div>
 .......Unlimited div occure
</div>
Ghanshyam Lakhani
  • 362
  • 3
  • 21

2 Answers2

2

One suggestion is to add a class name to them by taking their .position().top: 

$('.box').find('.abc').addClass(function(){
    return $(this).position().top >== 400 ? "pick" : "";
});

var picks = $('.box').find('.abc.pick'); // gives you all the divs whose
                                         // position top is >= 400px
Jai
  • 74,255
  • 12
  • 74
  • 103
  • Nice one, better than mine :) – EdenSource Sep 28 '15 at 13:15
  • @EdenSource both works fine this one just a bit compact. – Jai Sep 28 '15 at 13:16
  • Hello @Jai your code working perfectly but after postback it's position count from after Image not from .box div,b'cuz in .bx div containg image with random height then any idea about count position starting from .box div but not aftre image in .box div.you can see snap from this link http://stackoverflow.com/questions/32759654/how-to-count-child-div-within-of-its-parent-divs-400px-height-or-how-to-selec – Ghanshyam Lakhani Oct 09 '15 at 06:51
  • Though,work perfectly from starting after any poastback it's count position aftert image. – Ghanshyam Lakhani Oct 09 '15 at 06:53
  • @GhanshyamLakhani can't get you. It doesn't work or you have some scenario where it stopped working. – Jai Oct 09 '15 at 07:06
  • Hello @Jai i explain my problem by two snap , in this you can only look two image not understand any explanation .you can see on this link http://stackoverflow.com/questions/32759654/how-to-count-child-div-within-of-its-parent-divs-400px-height-or-how-to-selec – Ghanshyam Lakhani Oct 09 '15 at 07:30
2

You can use position() to detect top position of an element depending on its parent.

$(".box .abc").each(function(){
    var topPos = $(this).position().top;
    if(topPos>400){
        $(this).addClass("masked")
    }
});

Please see this Fiddle

EdenSource
  • 3,387
  • 16
  • 29
  • it's complete working, "masked" class add completely each box but after postback class are not properly add to each box..any idea about this i'm using update panel – Ghanshyam Lakhani Oct 06 '15 at 10:33
  • Could you provide the "post" process relevant code ? – EdenSource Oct 06 '15 at 10:36
  • sorry @EdenSource :it's not possible b'cus of large file,but if you have just idea about this. – Ghanshyam Lakhani Oct 06 '15 at 10:48
  • If you are using `.append()` to add your box, you can use something like this https://jsfiddle.net/yv61h844/ – EdenSource Oct 06 '15 at 10:52
  • Hello @EdenSource : your code working perfectly but after postback it's position count from after Image not from .box div,b'cuz in .bx div containg image with random height then any idea about count position starting from .box div but not aftre image in .box div.Though,work perfectly from starting after any poastback it's count position aftert image.you can see snap from this link http://stackoverflow.com/questions/32759654/how-to-count-child-div-within-of-its-parent-divs-400px-height-or-how-to-selec – Ghanshyam Lakhani Oct 09 '15 at 09:06
  • i explain my problem by two snap , in this you can only look two image not understand any explanation .you can see on this link http://stackoverflow.com/questions/32759654/how-to-count-child-div-within-of-its-parent-divs-400px-height-or-how-to-selec – Ghanshyam Lakhani Oct 09 '15 at 09:07