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

Question

我们正在使用一个框架，该框架创建由属性 data-type=[some data type] 标识的任意嵌套的 HTML 数据元素。其中每个都可以包含直接输入字段以及其他数据类型，作为单例或数组。嵌套结构唯一的优点是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 查找选择器来获取数据类型< /code> 元素位于给定对象之下的一个 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]')

如上所述工作。 I＜3SO。

Answer 1

编辑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]'));
}

这个递归深度，但是当找到带有的元素时，任何子分支上的递归都会停止>数据类型，因此只有当有一个不子级具有数据类型时，它才会继续。

如果我使用 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 的元素可能具有以下子元素：还有数据类型。如果是这种情况，请将选择器更改为：

var ex = $('#example1');

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

因此，总结一下，它表示获取所有具有数据类型的子和孙代码>属性。

---

原始答案：

如果我了解您想要具有 data-type 的子级，以及非 data-type 的子级，您也需要添加他们的孩子是数据类型。

var ex = $('#example1');

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

这使用 multiple-selector^[docs]。

第一个选择器是：

'> [data-type]'

...它将获取具有 data-type 属性的子级。

第二个选择器是：

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

...它将首先获取不具有数据类型的子级，但在这些选择器中，它将获取具有数据类型的子级< /em> 有数据类型。

这看起来像你想要的吗？

Answer 2

一个 POJS 函数可以执行您想要的操作并返回一个匹配元素的数组：

function getNodes(id) {
  var el = (typeof id == 'string')? document.getElementById(id) : id;
  var result = [];
  var node, nodes = el.childNodes;
  var prop = 'data-type';
  var tag = 'div';

  for (var i=0, iLen=nodes.length; i<iLen; i++) {
    node = nodes[i];

    if (node.tagName && node.tagName.toLowerCase() == tag) {

      if (node.getAttribute(prop)) {
        result.push(node);

      } else {
        result = result.concat(getNodes(node));
      }
    }
  }
  return result;
}

但是，我不确定您是否希望它像这个一样深入。可以将其修改为仅进入特定深度（例如一个或两个级别）。

Answer 3

这

$obj.find('> [data-type]');

如果我解决了你的问题，

应该可行。选择器 '> [data-type]' 的意思是“给我定义了‘data-type’并且是容器的直接子元素的所有元素。

Answer 4

$obj.children().map(function () {return this.name;})

也许？