Question

We’re using a framework which creates arbitrarily nested HTML data elements identified by the attribute data-type=[some data type]. Each of these can contain direct input fields as well as other data-type, either as singletons or arrays. The only saving grace of the nesting structure is a data-type will never contain data-types of the same type at any depth.

The HTML I have to work with

<div data-type='project' id='example1'>
  <input name='start-date'/>
  <div data-type='project-lead' id='example2'>
    <input name='department'/>
    <input name='email'/>
    <div data-type='analyst'>      
      <input name='department'/>
      <input name='email'/>
    </div>
    <div data-type='analyst'>      
      <input name='department'/>
      <input name='email'/>
    </div>
    <div data-type='analyst'>      
      <input name='department'/>
      <input name='email'/>
    </div>
  </div>
  <div class="JustToMakeMyLifeMoreDifficult">
    <div data-type='sponsor'>      
      <input name='department'/>
      <input name='email'/>
    </div>
    <div data-type='sponsor'>      
      <input name='department'/>
      <input name='email'/>
    </div>
  </div>
</div>

The Selector Problem

I need a JQuery find selector which gets me the set of data-type elements one data-type level beneath the given object:

myData($obj){
  return $obj.find('[data-type]').not([data-type elements further down]);
}

Such that:

myData($('#example1'))
myData($('#example2'))

respectively yields jquery results:

[project-lead,sponsor,sponsor]
[analyst, analyst, analyst]

JQuery wizards, please help me. You’re the only the ones that can.

Answered

This isn’t possible with JQuery selectors. I wrapped Patrick’s very elegant solution below into a generalized JQuery function-

(function( $ ){
  $.fn.dataChildren = function(_selector) {
        var iter = this;
        var res = this.children(_selector);
        while ( ( iter = iter.children(':not(' + _selector +')') ).length ) {
                res = res.add(iter.children(_selector));
        }
        return res;
  };
})( jQuery );

So that:

$('#example1').dataChildren('[data-type]')

Works as described above. I <3 SO.

Answer 1

EDIT 2: I think this is what you’re looking for:

var el = $('#example1');

var res = el.children('[data-type]');

while ( ( el = el.children(':not([data-type])') ).length ) {
    res = res.add(el.children('[data-type]'));
}

This one goes recursively deep, but the recursion on any child branch stops when an element is found with data-type, so it only continues as long as there’s a child that does not have data-type.

It may be easier to follow if I use a do-while loop, and unwind some of the code:

var el = $('#example1');  // el is the current level
var res = $();            // res holds the result
var data_types;           // holds the children with data-type for the current level

do {
      // from current level, get children with data-type
    data_types = el.children('[data-type]'); 

      // add those to the result set
    res = res.add( data_types );

      // make the current level be the children of the current level that
      //      do NOT have data-type
    el = el.children().not( data_types );

} while( el.length ); // continue as long as the new current level
                      //     has at least one element

.

.

EDIT: I may have misunderstood one part.

It looks like an element with data-type may have children that also have data-type. If that’s the case, change the selector to this:

var ex = $('#example1');

var res = ex.find('> [data-type], > * > [data-type]');

So to sum this one up, it says get all children and grandchildren that have a data-type attribute.

---

Original answer:

If I understand you want children with data-type, and of the children that are not data-type, you need too add their children that are data-type.

var ex = $('#example1');

var res = ex.find('> [data-type], > :not([data-type]) > [data-type]');

This uses the multiple-selector^[docs].

The first selector is:

'> [data-type]'

…which will get children that have a data-type attribute.

The second selector is:

'> :not([data-type]) > [data-type]'

…which will first get children that do not have data-type, but of those, it will get their children that do have data-type.

Does that look like what you want?