Jquery get the children with a condition

Question

I have a div with id='tips'. It has a multiple childs. What I need to do Is I want to fetch a child of the div with id='tips' which has its style, top < 10px. Here's a snippet of the code.

<div id="tips">
   <div style="top: 5px; left: 150px;">
      Required Div
      <span class="arrow"></span>          
    </div>
   <div style="top: 15px; left: 150px;">
      Not-Required Div
      <span class="arrow"></span>          
    </div>
   <div style="top: 45px; left: 150px;">
      Child3
      <span class="arrow"></span>          
    </div>
</div>

Only one div child div with top<10px exists.

Answer 1

Use filter():

var $child = $("#tips div").filter(function() {
    return parseInt($(this).css("top"), 10) < 10;
});

// you can do as needed with the element(s) here, this is just an example
$child.css("color", "#C00"); 

Example fiddle