使用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>

我想选择所有spans除了那些是其他divs的孩子之外的spans。应该选择p, button作为其他元素的子元素（例如p 或其他任何）。 span A, B and F只是一个例子。这意味着我想拥有$("#root").find("span").not("div span"); 。我试过了：

.not("div span")

但div删除所有跨距，因为根元素也是firstname := os.Args[1] lastname := os.Args[2] fmt.Println(lastname + ", " + firstname) 。有没有jQuery方法？

Answer 1

你可以尝试

$('#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>

注意：由于p无法将div元素作为其子元素，因此您的HTML无效。

Answer 2

您可以使用选择器来定位直接子元素和直接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 3

您可以使用.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>

Answer 4

您可以使用：

。

$（ “＃根”）找到（ “跨度”）否（ “＃根＆GT;跨度”）;