JavaScript | jQuery | Selecting In Layers: Select Closest Children But Their Children

Question

The goal is to select any descendant(s) -- regardless of direct-descendant indication -- but not their children. In other words, if I'm searching from document I'd like to find all children which are not wrapped by the target selector:

<div id="a1" class="scenario-1" data-behavior="test">
    test
    <div id="a2" data-behavior="test">
        test 1
        <div id="a3" data-behavior="test">
            test 2
        </div>
    </div>
</div>

<div class="scenario-2">
    <div id="b1" data-behavior="test">
        test 1
        <div id="b2" data-behavior="test">
            test 2
        </div>
    </div>
</div>

$(document).findAllInFirstLayer([data-behavior]);

This, ideally, would select #a1 & #b1 in the result-set. However, #a2, #a3, and #b2 should not be included, as this would proceed one scope to many.

The complimentary function for this will be recursive to drill down to the next scope for each layer-element in the set. So the next recursive call would return a set containing #a2, #b2, but not #a3 or any children ([data-behavior]) of #b2.

Also, this Question should not be marked as a duplicate of this question as the Accepted-Answer is not acceptable here -- the accepted answer here should use a jQuery selector or prove its impossibility with only using a jQuery selector.

Edit

With @guest271314's help, we reached the following answer:

'[data-behavior]:not([data-behavior] [data-behavior]), [data-behavior]:first'

Now, a recursive function can be used to take a parent-context and find the first-level scopes -- and recur in that fashion indefinitely. Here's an example:

arm: function autoRegisterModules(parent) {
    var $firstScope = $(parent).find('[data-behavior]:not([data-behavior] [data-behavior]), [data-behavior]:first');
    console.log('#context, #first-scope', parent, $firstScope);
    if ($firstScope.length) {
        $firstScope.each(function (i, p) {
            autoRegisterModules(p);
        });
    }
},

Please be sure to give credit where it's due.

#prethanks

Answer 1

This, ideally, would select #a1 & #b1 in the result-set.

Try using :not() for first result set , :first for next results

var first = $("[data-behavior]:not([data-behavior] [data-behavior])"),
  second = first.find("[data-behavior]:first"),
  third = second.find("[data-behavior]:first");

console.log(first, second, third);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="a1" class="scenario-1" data-behavior="test">
  test
  <div id="a2" data-behavior="test">
    test 1
    <div id="a3" data-behavior="test">
      test 2
    </div>
  </div>
</div>

<div class="scenario-2">
  <div id="b1" data-behavior="test">
    test 1
    <div id="b2" data-behavior="test">
      test 2
    </div>
  </div>
</div>

---

So the next recursive call would return a set containing #a2, #b2, but not #a3 or any children ([data-behavior]) of #b2.

using $.fn.extend()

(function($) {
  $.fn.extend({
    layers: function(sel) {
      var root, next, res = [],
        sel = sel || this.selector;
      if ($(sel + ":not(" + sel + " " + sel + ")").length) {
        root = $(sel + ":not(" + sel + " " + sel + ")");
        res.push([root]);
        if (root.find(sel + ":first").length) {
          next = root.find(sel + ":first");
          res.push([next]);
          while (next.find(sel + ":first").length) {
            next = next.find(sel + ":first");
            res.push([next])
          }
        }
      }
      return this.data("layers", res)
    }
  })
}(jQuery))

var layers = $("[data-behavior]").layers().data("layers");
$.each(layers, function(key, value) {
  console.log(key, value[0])
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="a1" class="scenario-1" data-behavior="test">
  test
  <div id="a2" data-behavior="test">
    test 1
    <div id="a3" data-behavior="test">
      test 2
    </div>
  </div>
</div>

<div class="scenario-2">
  <div id="b1" data-behavior="test">
    test 1
    <div id="b2" data-behavior="test">
      test 2
    </div>
  </div>
</div>