从具有 jQuery 的匹配元素集中删除

Question

我有下面的例子html：

<div id="root">
    <span>A</span><!--select-->
    <span>B</span><!--select-->
    <div>
        <span>C</span>
        <span>D</span>
        <div>
            <span>E</span>
        </div>
    <div>
    <p>
        <span>F</span><!--select-->
        <div>
            <span>G</span>
        </div>
    </p>
</div>

我想要 select 所有 spans 除了那些是其他 divs 的孩子。 spans 是 children 的其他元素（例如 p, button 或任何其他 ）应该 selected。 p 只是一个例子。这意味着我想要 span A, B and F。我试过了：

$("#root").find("span").not("div span");

但是 .not("div span") 删除所有跨度，因为根元素也是 div。 jQuery有办法吗？

Answer 1

您可以有一个选择器来定位直接子跨度元素和直接 p 元素中的跨度元素：

var target = $("#root").find("> span, >*:not(div) span");

 $(function(){
    $("#root").find("> span,*:not(div) span").css('color','red');
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="root">
    <span>A</span><!--select-->
    <span>B</span><!--select-->
    <div>
        <span>C</span>
        <span>D</span>
        <div>
            <span>E</span>
        </div>
    <div>
    <p>
        <span>F</span><!--select-->
        <div>
            <span>G</span>
        </div>
    </p>
</div>

Answer 2

你可以试试

$('#root span').not('#root div span').css('color', 'red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="root">
  <span>A</span>
  <!--select-->
  <span>B</span>
  <!--select-->
  <div>
    <span>C</span>
    <span>D</span>
    <div>
      <span>E</span>
    </div>
  </div>
  <p>
    <span>F</span>
    <!--select-->
    <div>
      <span>G</span>
    </div>
  </p>
</div>

注意：您的 html 无效，因为 p 不能将 div 元素作为其子元素。

Answer 3

您可以使用：

$("#root").find("span").not("#root>span");

Answer 4

您可以使用.filter()方法：

$('#root span').filter(function(){
    return this.parentNode.id == 'root' || this.parentNode.tagName.toLowerCase() != 'div'
}).addClass('found');

.found{border:solid 1px red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="root">
  <span>A</span>
  <!--select-->
  <span>B</span>
  <!--select-->
  <div>
    <span>C</span>
    <span>D</span>
    <div>
      <span>E</span>
    </div>
    <div>
      <p>
        <span>F</span>
        <!--select-->
        <div>
          <span>G</span>
        </div>
      </p>
    </div>

从具有 jQuery 的匹配元素集中删除

Remove from set of matched Elements with jQuery

jquery

jquery-filter