Question

例如，我有以下HTML结构：

<div class="container">
   <div class="field-container">...</div>
   <div class="field-container">...</div>
   <div class="field-container">...</div>
   <div class="field-container-with-details">
      <div class="details">...</div>
      <div class="details">...</div>
      <div class="details">...</div>
      <div class="details-to-skip">...</div>
      <div class="details-to-skip">...</div>
   </div>
</div>

我需要找到课程inputs中除.container以外的inputs的所有.details-to-skip。

怎么做？

Answer 1

所以你可以not-selector

$('.container input:not(.details-to-skip input)')

或.not（）

$('.container input').not('.details-to-skip input')

$('.container input:not(.details-to-skip input)').after('<span>before</span>');

$('.container input:not(.details-to-skip input)').val('selected')

.field-container-with-details > div {
  padding: 5px;
}
.field-container-with-details > .details {
  border: 1px solid green;
  margin-bottom: 3px;
}
.field-container-with-details > .details-to-skip {
  border: 1px solid red;
  margin-bottom: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="field-container"></div>
  <div class="field-container">...</div>
  <div class="field-container">...</div>
  <div class="field-container-with-details">
    <div class="details">
      <input />
    </div>
    <div class="details">
      <input />
    </div>
    <div class="details">
      <input />
    </div>
    <div class="details-to-skip">
      <input />
    </div>
    <div class="details-to-skip">
      <div>
        <input />
      </div>
    </div>
  </div>
</div>

Answer 2

您可以使用filter()。试试这个：

var $inputs = $('.container input').filter(function() {
    return $(this).closest('.details-to-skip').length == 0;
});

$inputs变量现在将包含这些div中未包含的所有输入的集合。

Answer 3

试试这个：

$('.container div:not(.details-to-skip) > input')

Answer 4

不幸的是，有些答案错误地选择了父母有.details-to-skip的输入。

他们倾向于重新包含输入，因为它们也是div class="field-container-with-details"

的后代

过滤器需要更具体：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/z8cqx8kq/1/

e.g。

$('.container div:not(.details-to-skip) > input');

注意：如果输入是div的直接子项，则此功能将起作用。

Rory的回答实际上是最强大的，因为它会查找该类的每个输入的祖先。
Arun P Johny的回答好像是魔法！它将祖先 - 后代关系选择器应用于后代（我不知道它会起作用 - 直到今天）。干得好阿伦：）

如何跳过一些div来搜索上下文？

4 个答案: