javascript - Jquery:获取不是具有相同类名的元素的后代的类的所有元素？

Question

问题:给定一个特定的容器 dom 元素(窗口、div、fieldset 等)，在该 DOM 元素中查找类 (.FormWidget) 的所有元素，递归地搜索所有元素该容器的后代。包含具有匹配类 (.FormWidget) 的元素，但不要查看内部。元素可以嵌套到 n 层。

例如，给定这个 HTML:

<fieldset id="MyFieldset" class="FormWidget FieldSetMultiplier">
  <legend>My Legend</legend>

  <div>
    <label for="Field1">Field1</label>
    <input type="text" name="Field1" value="" id="Field1" class="BasicInput FormWidget">
  </div>

  <div id="SomeWidget" class="FormWidget">
    <label for="Field2">Field2</label>
    <div name="Field2" id="Field2" class="FormWidget RestrictedComboBox"></div>
    <input type="text">
  </div>
</fieldset>

<div>
    <label for="Field3">Field3</label>
    <input type="text" name="Field3" value="" id="Field3" class="BasicInput FormWidget">
</div>

示例 1:

让伪 Jquery 函数“.findButNotInside()”代表我正在寻找的功能。

$(document).findButNotInside('.FormWidget');

应该只返回#MyFieldset 和#Field3。从窗口开始，字段 1 和 2 以及#SomeWidget 是 FormWidget，但不能包含它们，因为函数不允许查看其他 .FormWidget 内部以查找 FormWidget。 .FormWidget 字段集中的任何内容都是禁止访问的。

示例 2:

$('#MyFieldset').findButNotInside('.FormWidget');

应该只返回 #Field1 和 #SomeWidget。它应该在目标字段集 #MyFieldset 中寻找 .FormWidget，但不应返回 #Field2，因为不允许查看 .FormWidget 内部(在本例中为#SomeWidget)以查找其他 .FormWidget。

我认为这可以通过正确的函数和选择器来完成，但我不确定应该如何构造该选择器？

Answer 1

$.fn.findButNotInside = function(selector) {
    var origElement = $(this);
    return origElement.find(selector).filter(function() {
        var nearestMatch = $(this).parent().closest(selector);
        return nearestMatch.length == 0 || origElement.find(nearestMatch).length == 0;
    });
};

Fiddle .诀窍是检查 nearestMatch实际上在我们的搜索上下文中。

并注意这个无效的:

$('window').findButNotInside('.FormWidget');

...因为没有<window>标签。你想要的是:

$(document).findButNotInside('.FormWidget');