jQuery:获取类的所有不属于相同名称的元素的所有元素? [英] Jquery: Get all elements of a class that are not decendents of an element with the same class name?

问题描述

问题:给定特定的容器dom元素(窗口，div，字段集等)，然后在该DOM元素中查找类(.FormWidget)的所有元素，然后对所有元素进行递归搜索该容器的后代.包含具有匹配类(.FormWidget)的元素，但但不要向内看.元素可以嵌套到 n 个级别.

Problem: Given a specific container dom element (the window, a div, a fieldset, etc), find all elements of a class (.FormWidget) inside that DOM element, searching recursively through all of that container's descendants. Include, but do not look inside, elements with the matching class (.FormWidget). The elements can be nested to n levels.

例如，给定以下HTML:

For example, given this 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()"代表我正在寻找的功能.

Let the pseudo Jquery function ".findButNotInside()" represent the functionality I'm looking for.

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

应仅返回#MyFieldset和#Field3.从窗口开始，字段1和2以及#SomeWidget是FormWidgets，但由于不能使该函数在其他.FormWidgets内部查找以查找FormWidgets，因此不包含它们. .FormWidget字段集内的任何内容都是禁止进入的.

Should return only #MyFieldset and #Field3. Starting from the window, field 1 and 2 and #SomeWidget are FormWidgets, but they can't be included since the function is not allowed to look inside other .FormWidgets to find FormWidgets. Anything inside the .FormWidget fieldset is off limits.

示例2:

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

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

Should return only #Field1 and #SomeWidget. It should be looking for .FormWidgets that are inside the targeted fieldset, #MyFieldset, but should not return #Field2 because it is not allowed to look inside of a .FormWidget (in this case #SomeWidget) to find other .FormWidgets.

我认为可以使用正确的函数和选择器来完成此操作，但是我不确定应该如何构造该选择器?

I'm thinking this can be done with the right function and selector, but I'm not sure of how that selector should be constructed?

推荐答案

$.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;
    });
};

小提琴.诀窍是检查nearestMatch是否确实在我们的搜索上下文中.

Fiddle. The trick is to check that the nearestMatch is actually within our search context.

请注意，这无效:

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

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

...because there is no <window> tag. What you want is:

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

这篇关于jQuery:获取类的所有不属于相同名称的元素的所有元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！