How to select children elements but only one level deep with jQuery -

given this:

<div id="div1">     <div id="div2">         <div id="div200">             <div id="div3" class="b">                    </div>             <div id="div300">                 <div id="div4" class="b">                      <div id="div5">                          <div id="div6" class="b">                         </div>                                  </div>                 </div>             <div>         <div>     <div> </div> 

i need way find children (deep) of element of class "b" not nested inside matched element.

test cases:

this need:

case 1:

$("#div1").some_jquery_syntax(".b") should return: div3, div4 

case 2:

$("#div5").some_jquery_syntax(".b") should return: div6 

note hard part have have skip div2 when starting div1. can't use $("#div1").find("> .b").

my attempts:

i tried this:

$("#div1").find(".b") [<div id="div3" class="b"></div>, <div id="div4" class="b"></div>, <div id="div5" class="b"></div>] 

not good: don't want div5 because nested inside div4.

i tried this:

$("#div0").find(".b").not(".b .b") [<div id="div3" class="b"></div>, <div id="div4" class="b"></div>] 

which ok when starting div0, not work stating div4:

$("#div5").find(".b").not(".b .b") [] 

find immediate grand-children:

​$("#div1").children().children(".b"); 

fiddle: http://jsfiddle.net/jonathansampson/dy6gj/

if don't know how deep go, want .b not within .b, use filter while respecting parent limitations. use .parentsuntil method:

var parent = "#div1"; $(".b", parent).filter(function(){     return !$(this).parentsuntil(parent, ".b").length; }).css("border", "1px solid red");​​​​​​​​​​​​​​​​​ 

fiddle: http://jsfiddle.net/jonathansampson/dy6gj/3/