jquery選擇沒有嵌套在孩子身上的孩子

Question

我有一個jQuery選擇器的問題。

假設我有以下html，其中(...)代表未定義數量的html標簽。

(...)
<div class="container">
  (...)
    <div class="subContainer">
      (...)
        <div class="container">
          (...)
            <div class="subContainer"/>
          (...)
        </div>
       (...)
     </div>
   (...)
</div>
(...)

假設我有一個名為container的javascript變量指向第一個div（帶有類容器）。 我想要一個jquery來選擇第一個子容器而不是嵌套的子容器。 如果我使用$(".subContainer", container); 我會得到他們兩個。

我試過用了

$(".subContainer:not(.container .subContainer)", container);

但這會返回一個空集。 有解決方案嗎

謝謝。

Answer 1

您可以使用direct child選擇器：

$("> .subContainer", container);

如果container是引用頂級.container元素的jQuery對象，您還可以使用children方法：

container.children('.subContainer');

或find和first方法：

container.find('.subContainer').first();

Answer 2

基於Jquery：獲取一個類的所有元素，這些元素不是具有相同類名的元素的后代？ 我開發了以下解決方案。 謝謝大家。

$.fn.findButNotNested = function(selector, notInSelector) {
    var origElement = $(this);
    return origElement.find(selector).filter(function() {
        return origElement[0] == $(this).closest(notInSelector)[0];
    });
};

Answer 3

要獲得第一個subContainer，您可以使用

$('.subContainer')[0]

Answer 4

這似乎適合我自己的用途......

$('.item').filter(function() { return $(this).parents('.item').length == 0; });

這只返回#outer div。

<div class="item" id="outer">
    <div class="item" id="inner"></div>
</div>