javascript - 复杂的JQuery选择器-如何选择一个任意的“世代”？

我们正在使用一个框架，该框架创建由属性data-type=[some data type]标识的任意嵌套的HTML数据元素。这些中的每一个都可以包含直接输入字段以及其他data-type（单例或数组）。嵌套结构唯一可节省的宽限是data-type在任何深度都绝不会包含相同类型的data-types。

我必须使用的HTML

<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>

选择器问题

我需要一个JQuery查找选择器，它使我在给定对象下的一个data-type级别的data-type元素集：

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

这样：

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

分别产生jquery结果：

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

jQuery向导，请帮助我。您是唯一可以做到的人。

已回答

使用JQuery选择器是不可能的。我在下面将Patrick的非常优雅的解决方案包装到了通用的JQuery函数中-

(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 );

以便：

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

如上所述工作。我

最佳答案

编辑2：我认为这是您正在寻找：

var el = $('#example1');

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

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

这个递归深入，但是当使用data-type找到一个元素时，任何子分支上的递归都将停止，因此只要存在不具有data-type的子代，它就将继续进行。

如果使用do-while循环并展开一些代码，可能会更容易遵循：

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

  。
  
  。


编辑：我可能误解了一部分。

看起来具有data-type的元素可能具有也具有data-type的子元素。如果是这种情况，请将选择器更改为此：

var ex = $('#example1');

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

因此，总结一下，它表示获取具有data-type属性的所有子代和孙子代。



原始答案：

如果我了解您想要带data-type的孩子以及非data-type的孩子，那么您也需要添加其data-type的孩子。

var ex = $('#example1');

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

这使用multiple-selector。

第一个选择器是：

'> [data-type]'

...这将获得具有data-type属性的子级。

第二个选择器是：

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

...将首先获得不具有data-type的孩子，但是其中的一个将获得其不具有data-type的孩子。

看起来像您想要的吗？