Question

我有以下HTML代码：

  <div id="nested1" class="container">
     <div class="container-element"></div>
     <div class="some-other-class">
        <div class="container-element"></div>
        <div id="nested3" class="container">
          <div class="container-element">
             <div id="nested4" class="container">
                <div class="container-element"></div>
                <div class="container-element"></div>
                <div class="container-element"></div>
             </div>
          </div>
          <div class="container-element"></div>
          <div class="container-element"></div>
        </div>
     </div>
     <div id="nested2" class="container">
        <div class="container-element"></div>
        <div class="container-element"></div>
        <div class="container-element"></div>
     </div>
     <div class="container-element"></div>
     <div class="container-element">
        <div id="nested5" class="container">
          <div class="container-element"></div>
        </div>
     </div>  
  </div>

和jQuery代码：

$('.container').each(function() {
     // loop body: $(this) is a '.container'
});

现在在循环体内我需要用类＆＃39; .container-element＆＃39;选择所有元素。在当前＆＃39; .container＆＃39; 不在另一个＆＃39; .container＆＃39; 中，例如：

当$(this)指向具有id的第一个最外层容器时 nested1，我应该选择类.container-element的所有元素它不在另一个.container内（因此全部但是container中nested2，nested3，nested4的人， nested5）;
当$(this)指向ID为.container的{{1}}时，我应该只选择一个nested3并排除其中一个.container-element nested4;
当$(this)引用ID为.container的{{1}}时，我应该只选择一个nested5，这是其唯一的后代。

当然，jQuery的.container-element将不起作用。我也尝试过：

.find()

和

$('.container').each(function() {
      var containerElements = $(this).find('.container-element').not('.container .container-element');
});

但他们都没有工作。

此外，请注意我无法使用$('.container').each(function() { var containerElements = $(this).find('.container-element').not('.container .container .container-element'); });，因为给定.children()，我需要查找嵌套的container，前提是它们不在另一个.container-element内}}

我也在SO上找到了一些东西：Jquery: Get all elements of a class that are not decendents of an element with the same class name?

但在我看来，这与我想做的事情有点不同。

感谢您的关注。

Answer 1

我想出的是以下jquery mini-plugin：

$.fn.findNotWithin = function(selector, nested) {
   var that = this;
   var $notWithinNestedElements = this.find(selector).filter(
       function() {
           return $(this).parent().closest(nested).not(that).length == 0;
       }
   );
    return $notWithinNestedElements;
};

现在，使用这种方法：

$('.container').each(function() {
      var containerElements = $(this).findNotWithin('.container-element', '.container');
});

有效。但是我仍然在寻找更加语法化的解决方案。

编辑：此代码与上一代码相同：

$.fn.findNotWithin = function(selector, nested) {
   var that = this;
   var context = this[0];
   var $notWithinNestedElements = this.find(selector).filter(
       function() {
           return $(this).parent().closest(nested, context).length == 0;
       }
   );
    return $notWithinNestedElements;
};

但我更喜欢它，它使用.closest()的上下文参数。

如何使用jQuery查找容器内不在另一个容器内的所有元素？

1 个答案: