Finding all the X-generation descendants with jQuery

Question

Solved (view)

Well, I think I decided (except in extreme cases) using the following:

function findByDepth(parent, child, depth){
    var children = $();
    $(child, $(parent)).each(function(){
        if($(this).parentsUntil(parent, child).length == (depth - 1)){
            children = $(children).add($(this));
        }
    });
    return children;
}

// this would successfully return the 3.X elements of an HTML snippet structured
// as my XML example, where <parent> = #parent, etc.
var threeDeep = findByDepth('#parent', '.child', 3);

However, someone must accept the accepted answer here, and I am not going to answer it myself and hide with your well-established representative. So, if someone wants to add something, for example, to give an idea about the optimization of this function (before I leave and $.extend()), I will most likely mark your answer correctly, otherwise we will return to marking who was first in my original question.

By the way, check this in the script: http://jsfiddle.net/5PDaA/

Sub update

@CAFxX, , , , , querySelectorAll , . , , guff:

$.fn.extend({
    'findAtDepth': function(selector, depth){
        var depth = parseInt(depth) || 1;
        var query = selector;
        for(var i = 1; i < depth; i++){
            query += (' ' + selector);
        }
        return $(query, $(this)).not(query + ' ' + selector);
    }
});

, , , selector, - .

---

Update

, , . , ; , , ( ), . , . , +1 :

( , ), ( ) .

(XML ):

<!-- depth . sibling-index-with-respect-to-depth -->

<parent>
    <child>                     <!-- 1.1 -->
        <child>                 <!-- 2.1 -->
            <child>             <!-- 3.1 -->
                <child></child> <!-- 4.1 -->
            </child>            
            <child>             <!-- 3.2 -->
                <child></child> <!-- 4.2 -->
            </child>            
        </child>                
        <child>                 <!-- 2.2 -->
            <child></child>     <!-- 3.3 -->
        </child>                
    </child>                    
</parent>

2, 2.X. 4 4.X ..

---

jQuery, " " , ? :

. . .child .

. , , , , .

// HTML
<div id="parent">
    <div>
        <div class="child"> <!-- match -->
            <div>
                <div class="child"> <!-- NO match -->
                </div>
            </div>
        </div>
        <div class="child"> <!-- match -->
            <div>
                <div class="child"> <!-- NO match -->
                </div>
            </div>
        </div>
    </div>
</div>

// jQuery
$('#parent').find('.child:generation(1)'); // something in that vein

#parent, jQuery :first , .child.

Answer 1

(KISS!):

$("#parent .child").not(".child .child");

edit: :

$("#parent .child .child").not(".child .child .child");

:

$("#parent .child .child .child").not(".child .child .child .child");

.., ():

function findChildrenDeepDown(parentSelector, level) {
  level = parseInt(level);
  var firstSelctor = parent, notSelector = ".child", i;
  for (i=0; i<level; i++) {
    firstSelector += " .child";
    notSelector += " .child";
  }
  return $(firstSelector).not(notSelector);
}

findChildrenDeepDown("#parent", 3); // find third-level children of #parent

Answer 2

:

$("#parent").find(">div>.child")

---

,

$("#parent").find(".child").siblings();

Answer 3

In general, I think you will need to find all the elements .child, and then discard those that have .childancestors:

$('#parent .child').filter(function() {
    return $(this).parent().closest('.child').length == 0;
});

This does not handle such things, though:

<div id="parent">
    <div class="child"> <!-- match -->
        <div>
            <div class="child"> <!-- NO match -->
            </div>
        </div>
    </div>
    <div>
        <div>
            <div class="child"> <!-- NO match wanted but it will match -->
            </div>
        </div>
    </div>
</div>

but maybe that’s enough for the structure of your HTML.