JavaScript | jQuery | 分層選擇：選擇最近的孩子，但選擇他們的孩子

Question

目標是選擇任何后代- 無論其后裔如何指示 -但不要選擇其后代 。 換句話說，如果我要從document搜索，我想找到所有未由目標選擇器包裝的孩子 ：

<div id="a1" class="scenario-1" data-behavior="test">
    test
    <div id="a2" data-behavior="test">
        test 1
        <div id="a3" data-behavior="test">
            test 2
        </div>
    </div>
</div>

<div class="scenario-2">
    <div id="b1" data-behavior="test">
        test 1
        <div id="b2" data-behavior="test">
            test 2
        </div>
    </div>
</div>

$(document).findAllInFirstLayer([data-behavior]);

理想情況下，這將在結果集中選擇#a1和#b1 。 但是，不應包含#a2 ， #a3和#b2 ，因為這會使一個范圍擴展到許多范圍 。

此功能的互補功能將是遞歸的，以向下鑽取集合中每個圖層元素的下一個范圍。 所以接下來的遞歸調用會返回包含一組#a2 ， #b2 ，但不是#a3或任何子女（ [data-behavior]的） #b2 。

此外，這個問題應該不是被標記為一個重復這個問題，在這里接受的答案應該使用jQuery選擇或證實其不可能只使用jQuery選擇-作為接受應答是不是在這里接受的。

編輯

在@ guest271314的幫助下，我們得出了以下答案：

'[data-behavior]:not([data-behavior] [data-behavior]), [data-behavior]:first'

現在，可以使用遞歸函數獲取父上下文並找到第一級作用域 -並以這種方式無限期地遞歸。 這是一個例子：

arm: function autoRegisterModules(parent) {
    var $firstScope = $(parent).find('[data-behavior]:not([data-behavior] [data-behavior]), [data-behavior]:first');
    console.log('#context, #first-scope', parent, $firstScope);
    if ($firstScope.length) {
        $firstScope.each(function (i, p) {
            autoRegisterModules(p);
        });
    }
},

請確保在到期時注明信用。

＃感謝

Answer 1

理想情況下，這將在結果集中選擇#a1和#b1 。

嘗試對第一個結果集使用:not() ，對下一個結果使用:first

 var first = $("[data-behavior]:not([data-behavior] [data-behavior])"), second = first.find("[data-behavior]:first"), third = second.find("[data-behavior]:first"); console.log(first, second, third); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <div id="a1" class="scenario-1" data-behavior="test"> test <div id="a2" data-behavior="test"> test 1 <div id="a3" data-behavior="test"> test 2 </div> </div> </div> <div class="scenario-2"> <div id="b1" data-behavior="test"> test 1 <div id="b2" data-behavior="test"> test 2 </div> </div> </div> 

---

所以接下來的遞歸調用會返回包含一組#a2 ， #b2 ，但不是#a3或任何子女（ [data-behavior]的） #b2 。

使用$.fn.extend()

 (function($) { $.fn.extend({ layers: function(sel) { var root, next, res = [], sel = sel || this.selector; if ($(sel + ":not(" + sel + " " + sel + ")").length) { root = $(sel + ":not(" + sel + " " + sel + ")"); res.push([root]); if (root.find(sel + ":first").length) { next = root.find(sel + ":first"); res.push([next]); while (next.find(sel + ":first").length) { next = next.find(sel + ":first"); res.push([next]) } } } return this.data("layers", res) } }) }(jQuery)) var layers = $("[data-behavior]").layers().data("layers"); $.each(layers, function(key, value) { console.log(key, value[0]) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <div id="a1" class="scenario-1" data-behavior="test"> test <div id="a2" data-behavior="test"> test 1 <div id="a3" data-behavior="test"> test 2 </div> </div> </div> <div class="scenario-2"> <div id="b1" data-behavior="test"> test 1 <div id="b2" data-behavior="test"> test 2 </div> </div> </div>