仅选择第一级元素，不选择具有相同元素名称的子元素答案

【问题标题】：Selecting only first level element, not child elements with the same element name仅选择第一级元素，不选择具有相同元素名称的子元素
【发布时间】：2013-10-20 15:11:36
【问题描述】：

如何只选择第一级 .block 而不选择任何子级？

$('.block:not("Children of this here")')

<div class="block"> <!-- this -->
  <div class="block"> <!-- not this -->
    <div class="block"> <!-- not this -->

    </div>
  </div>
</div>

<div class="block"> <!-- and this -->
  <div class="block"> <!-- not this -->
    <div class="block"> <!-- not this -->

    </div>
  </div>
</div>

【问题讨论】：

你给他们一个block的类有什么原因吗？如果是给所有样式设置样式，你知道继承和多重选择器，即（.block, .date, .info { color: blue; }）
@alex，对于这种情况，假设重命名块是不可能的（谢谢，Drupal）。因此，这个问题的难度。

标签： jquery css

【解决方案1】：

如果该示例标记具有父元素，例如下面。如果不是，则父级将是body（如果它是有效的 HTML）。

HTML

<div id="parent">
<div class="block">
  <div class="block">
    <div class="block">

    </div>
  </div>
</div>
</div>

jQuery

$('#parent > .block').css({ border: '1px solid red' });

【讨论】：

欢迎寻求合理的解决方案！

【解决方案2】：

您可以使用:first 选择器仅选择第一个匹配的.block 元素：

$('.block:first')

这是因为 jQuery 按文档顺序匹配元素。最外层的.block 元素将是.block 匹配的第一个元素，:first 将过滤以仅返回它。

请注意，:first 与 :first-child 不同。

编辑：为了响应您的更新，您可以编写以下内容，这仅在所有元素嵌套三层深度时才有效：

$('.block:note(:has(.block .block))')

您可以使用函数调用编写更强大的解决方案：

$('.block').not(function() { return $(this).closest('.block').length; })

这将找到所有.block 元素，然后删除任何具有与.block 匹配的祖先的匹配元素。（如果您愿意，可以将closest 替换为parent）。

【讨论】：

对不起，我更新了问题。我需要匹配每个块嵌套的第一个 .block，所以我不知道这是否可行，因为它找到了文档中的第一个块

【解决方案3】：

$('#parent').children('.block');

请参阅.children() jQuery 参考。

【讨论】：

【解决方案4】：

试试这个：

$("div.block:first").<what you want to do>

编辑：删除空格。谢谢:-)....现在应该很好了。

HTH

【讨论】：

你还有一个额外的空间，除非.block是div元素的子元素。