3

問題: 特定のコンテナー DOM 要素 (ウィンドウ、div、フィールドセットなど) が与えられた場合、その 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ます。.FormWidget対象のフィールドセット内にある を検索する必要#MyFieldsetがありますが、.FormWidget (この場合は #SomeWidget) 内を参照して他の .FormWidget を検索することは許可されていないため、#Field2 を返すべきではありません。

これは正しい関数とセレクターを使用して実行できると考えていますが、そのセレクターをどのように構築すればよいかわかりませんか?

4

5 に答える 5

5 
$.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トリックは、実際に検索コンテキスト内にあることを確認することです。

そして、これは無効であることに注意してください:

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

<window>…タグがないので。あなたが望むものは：

$(document).findButNotInside('.FormWidget');
于 2012-09-27T15:54:16.883 に答える
1 
$("container-selector").find(".class").not(".class .class");
于 2012-09-27T14:52:04.760 に答える
0

より洗練された「jqueryish」ソリューションは考えられませんでした。ただし、これは再帰的に実行できます。

http://jsfiddle.net/zzBMq/

function findIt($elements){

    $elements.children().each(function(i){
        var $this = $(this);

        if($this.is(".FormWidget")){
            // do something with the matched element
            $this.css("border","1px solid red");
        }else{
            // make the recursive call
            findIt($this);
        }
    });
}

findIt($("#MyFieldset"));

あなたは明らかにこれをプラグインに変えることができます。

于 2012-09-27T15:15:24.647 に答える
0 
(function($){
    $.fn.findButNotInside = function(selector){
        var _n,_o,elemArr=[];
        this.find('.FormWidget').each(function(){
            _o = _n;
            _n = $(this);
            try{
                if(_o&&_o.find(_n).length){
                    _n = _o;
                    if(elemArr.indexOf(_o)==-1) throw _o;
                }else throw _n;
            }catch(e){
                elemArr.push(e);
            }
        });
       return $().add(elemArr);
    }
})(jQuery);

フィドル: http://jsfiddle.net/guerilla/p9fMX/

于 2012-09-27T15:48:07.590 に答える